React Context更新异常：登录后其他页面无法获取用户上下文

你的CurrentUserContext状态仅存在UserContextLayout组件的内存中，没有做持久化处理。一旦页面刷新（或组件重新挂载），状态就会重置为初始值null；另外登录时直接调用navigate，虽然setCurrentUserContext是异步操作，但单页路由跳转场景下，核心问题还是状态未持久化导致的丢失。

1. 给用户上下文加上持久化逻辑 #

修改UserContextLayout.jsx，让组件初始化时从localStorage读取用户信息，状态更新时同步写入存储：

import { Outlet } from "react-router-dom";
import { useState, useEffect } from "react";
import { CurrentUserContext } from "../hooks/CurrentUserContext";

const UserContextLayout = () => {
  // 从localStorage初始化用户状态
  const [currentUserContext, setCurrentUserContext] = useState(() => {
    const savedUser = localStorage.getItem("currentUser");
    return savedUser ? JSON.parse(savedUser) : null;
  });

  // 状态变化时同步到localStorage
  useEffect(() => {
    if (currentUserContext) {
      localStorage.setItem("currentUser", JSON.stringify(currentUserContext));
    } else {
      localStorage.removeItem("currentUser");
    }
  }, [currentUserContext]);

  return (
    <CurrentUserContext.Provider
      value={[currentUserContext, setCurrentUserContext]}
    >
      <Outlet />
    </CurrentUserContext.Provider>
  );
};

export default UserContextLayout;

2. 优化登录跳转逻辑（可选） #

如果担心setCurrentUserContext异步更新还没完成就跳转，可以用useEffect监听状态变化后再跳转：
修改Signin.jsx的相关代码：

// 新增useEffect监听用户状态
useEffect(() => {
  if (currentUserContext) {
    navigate("/");
  }
}, [currentUserContext, navigate]);

const handleSubmit = async () => {
  try {
    const response = await signin(user1);
    setCurrentUserContext(response.data.user);
    authenticate(response.data.token, rememberMe);
  } catch (error) {
    console.log(error);
  }
};

3. 修复路由中的导入遗漏 #

你的MainRouter.jsx里用了Navigate但没导入，补上：

import { Route, Routes, Navigate } from "react-router-dom";

登录成功后，打开浏览器开发者工具的Application标签，查看localStorage里是否有currentUser条目。刷新页面后，上下文会自动从localStorage恢复用户信息，不再是null。

内容的提问来源于stack exchange，提问作者Abdullah Rady