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

Проблема была в том, что с <Component component = {this.props.component} /> что-то не так. Я взял это из документации по реактивному маршруту, поэтому ожидал, что это сработает. Ответ
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 }}}/>;
              }
          }
        }}/>)
    }
}

Answer 2

• Импортировали ли вы все необходимые библиотеки (реагировать, реагировать-дом, реагировать-маршрутизатор-дом)?
• Вы импортируете другие компоненты (LoadingSpinner и т. Д.)?
• Вы экспортируете ProtectedRoute?

Вы не сможете ничего визуализировать, если за этим не последует и ваш проект настроен неправильно.

Я новичок в JS и реагирую.

Тогда не начинайте с роутера. Начните с нуля, чтобы создать простое приложение, отображающее только одну страницу, и приложение hello world будет достаточно.

Попробуйте эти 2 учебника, всегда следуйте инструкциям и проверяйте правильное использование компонентов, используя Официальные документы :

• Учебное пособие
• React Официальный учебник