PirvateRoute在做出反应

Question

有人可以将反应路径文档中的代码片段重写为我更了解的类。

`

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      fakeAuth.isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

`

我试过，但我有TypeError: instance.render is not a function，我不知道应该改变什么，我是JS和React的新手。

`

class ProtectedRoute extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(<Route path={this.props.path}  render={props => {
          if(store.getState().loginReducer.loggedIn === true){
              return <Component component = {this.props.component} />
          }
          else{
              let token = localStorage.getItem("token");
              if(token){
                  let receivedAt = localStorage.getItem("receivedAt");
                  if(Date.now() - receivedAt < 120*60*1000){
                      this.props.dispatch(validateLogin(token));
                      return(<LoadingSpinner/>);
                  }
                  else {
                      return <Redirect to={{pathname: "/login", state: {from: props.location}}}/>;
                  }
              }
              else{
                  return <Redirect to={{pathname: "/login", state: { from: props.location }}}/>;
              }
          }
        }}/>)
    }
}

`

Answer 1

• 您是否导入了所有必需的库（react，react-dom，react-router-dom）？
• 您是否导入其他组件（LoadingSpinner等）？
• 你出口ProtectedRoute？

如果未遵循此项并且未正确设置项目，则无法呈现任何内容。

我是JS和React的新手。

那么不要从路由器开始。开始新鲜做一个简单的应用程序只显示一个页面，一个问候世界的应用程序就足够了。

尝试这两个教程，并始终遵循指南并检查如何使用Official docs正确使用组件：

• Tutorials point
• React Official tutorial

Answer 2

问题是<Component component = {this.props.component} />有问题。我从react-route文档中获取了这个，所以我期待这个工作。答案是

const ComponentToRender = this.props.component;
 return <ComponentToRender/>;

完整的工作代码形成了问题。

class ProtectedRoute extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return(<Route path={this.props.path}  render={props => {
          if(store.getState().loginReducer.loggedIn === true){
              const ComponentToRender = this.props.component;
              return <ComponentToRender/>;
          }
          else{
              let token = localStorage.getItem("token");
              if(token){
                  let receivedAt = localStorage.getItem("receivedAt");
                  if(Date.now() - receivedAt < 120*60*1000){
                      this.props.dispatch(validateLogin(token));
                      return(<LoadingSpinner/>);
                  }
                  else {
                      return <Redirect to={{pathname: "/login", state: {from: props.location}}}/>;
                  }
              }
              else{
                  return <Redirect to={{pathname: "/login", state: { from: props.location }}}/>;
              }
          }
        }}/>)
    }
}