перенаправить на страницу входа, когда пользователь не аутентифицирован

Question

Я хочу перенаправить на страницу входа, когда пользователь не аутентифицирован. Я могу проверить, что это componentDidMount, но у него нет хорошего UX. Как я могу сделать это с реагировать роутер DOM?

Answer 1

Вы можете использовать Redirect и privateRoute. Компонент PriveRoute:

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

export default PrivateRoute;

и используйте его в своем BrowserRouter:

<PrivateRoute
    exact
    path='/home'
    component={<Home />}
/>

, вы можете проверять аутентификацию в PrivateRoute с помощью приставки или как угодно.