React Router - проверка подлинности отображает пустую страницу

Question

Я довольно новичок в React Router. Я пытаюсь реализовать проверку подлинности, когда приложение работает так, как ответили здесь: Как реализовать аутентифицированные маршруты в React Router 4? . Если вы вошли в систему, он должен загрузить компонент панели инструментов, если нет, вы должны быть перенаправлены на экран входа в систему.

Перенаправление не работает, это просто пустая страница.

Есть идеи?

export default class App extends React.Component {
  state = {
    auth: false
  };

  updateAuth = value => {
    this.setState({
      auth: value
    });
  };

  render() {
    const { auth } = this.state;
    console.log(auth);

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

    return (
      <Router>
        <div>
          <Route path="/login" component={Login} auth={this.updateAuth} />
          <PrivateRoute path="/dashboard" component={Dashboard} />
        </div>
      </Router>
    );
  }
}

https://codesandbox.io/s/rj6pqkw7xq

Answer 1

У вас все еще есть атрибут path в PrivateRoute, установленный на /dashboard, если вы перейдете к https://qlj5rnnlnq.codesandbox.io/dashboard, он попытается загрузить страницу панели мониторинга, но потерпит неудачу, поскольку файл на сервере не 'Расширение файла .js.

Если вы хотите перейти на страницу панели мониторинга от корневого URL-адреса, измените путь на:

<PrivateRoute authed={true} path="/" component={Dashboard} />

, а также измените расширение файла наФайл панели инструментов, поэтому он становится Dashboard.js