时间戳

首页 > 解决方案 > react router v5 privateroute 登录并刷新页面后进入登录

reactjs - react router v5 privateroute 登录并刷新页面后进入登录

问题描述

我正在尝试使用反应路由器实现私有路由，当我第一次登录时出现问题，它会进入我想要的特定页面，但是当我刷新页面时，即使它已登录，它也会进入登录页面。

我的路由器代码：

export default function PsyaRouter() {
  const auth = useSelector((state) => state.auth);

  return (
    <Router>
      <SnackbarProvider maxSnack={4} hideIconVariant={false}>
        <Header>
          <CustomSnackbar />
          <Switch>
            <Route path="/login">
              <Login />
            </Route>
            <Route path="/enterPhone">
              <EnterPhone />
            </Route>
            <Route path="/enterCode">
              <EnterCode />
            </Route>
            <PrivateRoute path="/assessment/create">
              <AssessmentForm />
            </PrivateRoute>
            <PrivateRoute path="/assessment">
              <Assessment />
            </PrivateRoute>
            <Route path="/users">
              <Users />
            </Route>
            <Route path="/groups">
              <Groups />
            </Route>
            <Route path="/not-found">
              <NotFound />
            </Route>
            <Redirect to="/not-found" />
          </Switch>
        </Header>
      </SnackbarProvider>
    </Router>
  );
}

这是我的私有路由实现：

export default function PrivateRoute({ children, ...rest }) {
  const auth = useSelector((state) => state.auth);
  // const { last_role_type: userType } = useSelector((state) => state.user);

  useEffect(() => {
    console.log("router auth obj: ", auth);
  }, []); //auth

  return (
    <Route
      {...rest}
      render={(props) => {
        return auth.isLoggedIn ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/enterPhone",
              state: { from: props.location },
            }}
          />
        );
      }}
    />
  );
}

标签： reactjsreduxreact-reduxreact-routerreact-router-dom

解决方案

请记住，当您刷新浏览器时，所有 state 和 props 都会被清除为其初始值，就像您键入地址路径并按回车一样。

因此，尽管您提供的代码并未暗示它，但很明显您的 state/prop 值auth.isLoggedIn已被清除，因此可能false.

推荐阅读