我的App
组件中有这两条路由,user
属性来自上下文.当用户登录时,他们的邮箱被保存在本地存储中,然后我try 在我的上下文中阅读它.
UserContext.js个
const [user, setUser] = useState(null);
useEffect(() => {
if (!localStorage.getItem("user")) {
return;
} else {
setUser(localStorage.getItem("user"));
}
}, []);
App.jsx个
const { user } = useContext(UserContext);
<Route
path="create"
element={user ? <Create /> : <Navigate to="/login" />}
/>
<Route
path="dashboard"
element={user ? <Dashboard /> : <Navigate to="/login" />}
/>
如果用户没有登录,他们不能访问这两条路由,应该被定向到login
页,这是可行的.然而,当用户登录时,我可以转到/dashboard
,如果我转到/create
,就可以转到BUT,Reaction重定向到/dashboard
.我的头都要碎了,为什么?我遗漏了什么?谢谢大家
当我在地址栏中手动输入URL或刷新/create
页时,就会出现这种情况.即使我登录了,我也会被重定向到/dashboard
.谢谢
UPDATE个
我认为正在发生的情况是,重定向在设置user
值之前发生.如果我直接从本地存储设置user
值,如下所示:const user = localStorage.getItem('user')
,那么它的工作方式就应该是这样的.但话又说回来,它又伤到了我的大脑,因为这只发生在/create
页.