React Context+React Router路由保护：刷新跳转登录问题求解

你遇到的问题核心是：页面刷新时，AuthContext的userData初始值为undefined，而RequireAuth组件会立刻根据这个初始值判断并跳转登录页，等到useEffect从localStorage读取并恢复userData时，跳转已经完成了。

解决思路是增加一个加载状态，在localStorage数据读取完成前，不执行路由跳转逻辑，避免误判。

修改步骤： #

1. 完善AuthProvider的加载状态
   恢复你注释掉的loading状态，在useEffect读取完localStorage后结束加载，并将loading状态传入Context：

export const AuthProvider = ({ children }) => {
  const [loading, setLoading] = useState(true);
  const [userData, setUserData] = useState();

  useEffect(() => {
    const data = JSON.parse(localStorage.getItem('whatsappCloneData'));
    if (data) {
      setUserData(data);
    }
    // 无论是否读取到数据，都结束加载
    setLoading(false);
  }, []);

  return (
    <AuthContext.Provider value={{ userData, setUserData, loading }}>
      {children}
    </AuthContext.Provider>
  );
};

2. 更新RequireAuth组件的判断逻辑
   在加载状态未结束时，返回一个加载占位（比如null或自定义加载组件）；加载完成后，再根据userData的值判断是否跳转登录页：

const RequireAuth = () => {
  const { userData, loading } = useContext(AuthContext);

  // 加载中时不做跳转，避免误判
  if (loading) {
    return null; // 可替换为<Loading />组件提升用户体验
  }

  // 加载完成后，再判断是否需要跳转
  if (!userData) {
    return <Navigate to="/login" />;
  }

  return <Outlet />;
};

这样修改后，页面刷新时会先等待localStorage数据读取完成，再执行权限判断，就不会出现刚刷新就跳转到登录页的问题了。

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