reactrouterv5privateroute在登录并刷新页面后进入登录

Question

我正试图用react router实现私有路由，当我第一次登录时会出现问题，它会转到我想要的特定页面，但当我刷新页面时，它会转至登录页面，即使它已登录。

我的路由器代码：

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 },
}}
/>
);
}}
/>
);
}

Answer 1

刷新页面时，反应重新装载整个应用程序，然后重置所有状态。要解决此问题，请使用localStorage或sessionStorage持久化您的身份验证数据，然后在您的专用路由组件中获取这些数据进行验证。

Answer 2

请记住，刷新浏览器时，所有状态和道具都会被清除为初始值，就像键入地址路径并点击return一样。

因此，尽管您提供的代码中没有暗示这一点，但很明显，您的状态/道具值auth.isLoggedIn已被清除，因此很可能是false。