我的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页.

推荐答案

初始的user状态是null,例如一个假的值,所以当您手动更改地址栏中的URL时,页面将被重新加载,任何user状态都会被重置,初始的null值将用于初始呈现周期,直到useEffect挂钩运行并从本地存储读取为止.

使用惰性状态初始化器函数从本地存储提供初始的user状态,并使用useEffect挂钩将任何user状态更改持久化到本地存储.

例如:

const [user, setUser] = useState(() => {
  return JSON.parse(localStorage.getItem("user"));
});

useEffect(() => {
  localStorage.setItem("user", JSON.stringify(user));
}, [user]);

要处理保护路由/内容的问题,请参阅我的答案here以实现标准的路由保护.

Reactjs相关问答推荐

在迁移到Redux—Toolkit 2.0和Redux5.0之后,我在extraReducer和Slice方面有点挣扎,

为什么这个'Suspense'子组件在挂起promise解决后会丢失它的状态,而不是呈现?<>

如何将Redux工具包添加到expo (SDK 50)项目?

Reaction中的数据加载不一致

如何在REACTIVE js中动态添加或删除输入字段?

我从 S3 存储桶下载图像时收到错误

Mui DataGrid 在第二页和前一页上显示项目时出现问题

React Js和Firestore中如何将当前ID与集合中的ID查询以仅显示具有相似字段和值的文档-第二部分

VideoSDK api 不使用更新状态

RTK 查询Mutations 在 StrictMode 中执行两次

意外的标记.您可能需要一个合适的加载器来处理这种文件类型.书?.img? /*#__PURE__*/React.createElement("img",

从其他组件切换 FieldSet

如何从 graphql/apollo 中的缓存中清除多个查询

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

如何在props 更改时运行自定义挂钩?

是什么导致了这个令人惊讶的数组导致 React

在 React 中,为什么不能向空片段添加键(短语法)?

网格项不缩小以适应包含的可滚动列表

交换键仍然引入了 fresh 的 DOM 元素

当页面重新加载react 路由导航到第一页 v6