Аутентифицированная навигация в React

Question

Я изучаю React. Мой код маршрутизатора React, как показано ниже

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>
        <Route exact path="/" component={Login} />
        <Route exact path="/register" component={Register} />
        <PrivateRoute path="/dashboard" exact component={Dashboard} />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById('root')

Мой личный маршрут как ниже

const PrivateRoute = ({ component: Component }) => (
    <Route
        render={props =>
            (Auth.isAuthenticated() ? ( <Component {...props} />) : (<Redirect to={{ pathname: '/',}}/>))
        }
    />
);

Используя приведенный выше код, я могу просматривать страницу входа после входа в систему (http://localhost:3000/). Но после успешного входа в систему мне нужно перенаправить на страницу dashboard, если кто-нибудь попытается просмотреть страницу входа.

Как я могу это сделать?

Answer 1

Создать маршрут только для посетителей, похожий на частный маршрут. Если пользователь прошел аутентификацию, перенаправьте его на панель мониторинга, иначе отобразите целевой компонент.

const VisitorOnlyRoute = ({ component: Component }) => (
    <Route
        render={props =>
            (Auth.isAuthenticated() === false? ( <Component {...props} />) : (<Redirect to={{ pathname: '/dashboard',}}/>))
        }
    />
);

Теперь используйте этот компонент маршрута с вашими компонентами входа / регистрации, такими как:

<VisitorOnlyRoute path="/register" exact component={Register} />

Answer 2

Благодаря компоненту Route ваш компонент Login получает реквизит history, с помощью которого вы можете инициировать перенаправление.

Просто позвоните history.push('/dashboard') после успешного входа в систему.

/* In your `Login` component */
function doLogin() {
    somehowSendLoginApiRequest().((response) => {
        if (response.ok) {
            this.props.history.push('/dashboard');
        }
    });
}