は、関数error

Question

import React,{Component,} from 'react'; 
import {Route,Redirect} from 'react-router-dom'; 

export default class PrivateRoute extends React.Component{ 
    constructor(){ 
     super() 
    } 
    render(){ 
     const {component, authed, ...rest}=this.props; 
     return(
      <Route 
      {...rest} 
      render={(props) => authed === true 
       ? <Component {...this.props} /> 
       : <Redirect to={{pathname: '/login', state: {from: props.location}}} />} /> 
     ) 
    } 
} 

エラーをレンダリング与えルータ4カスタムコンポーネントを反応します。

あなたはそれを拡張するクラスを作成する必要があり、あなたのrenderメソッドで出力として Componentを使用することはできません

Answer 1

：

TestComponent

import React from 'react'; 
import {Route, Redirect} from 'react-router-dom'; 

export default class TestComponent extends React.Component{ 
    render(){ 
     return <span>Hello</span> 
    } 
} 

を作成PrivateRoute

ことに注意してください。ここでは不要なのでconstructorを削除しました：

import React from 'react'; 
import {Route, Redirect} from 'react-router-dom'; 
import TestComponent from './TestComponent'; 

export default class PrivateRoute extends React.Component{ 
    render(){ 
     const {component, authed, ...rest}=this.props; 
     return(
      <Route 
      {...rest} 
      render={(props) => authed === true 
       ? <TestComponent {...this.props} /> 
       : <Redirect to={{pathname: '/login', state: {from: props.location}}} />} /> 
     ) 
    } 
}