React Router Dom 6中刷新受保护路由重定向登录问题求助

问题核心是组件初始渲染时user为null，而用户信息加载逻辑在useEffect中（组件挂载后才执行），导致ProtectedRoutes首次判断直接跳转到登录页，后续user更新时跳转已经完成。

解决方案：添加加载状态，避免初始误跳转 #

1. 更新AuthProvider，新增加载状态
   在上下文管理中加入isLoading，标记用户信息是否加载完成：

   export const AuthContext = createContext();
   
   export const AuthProvider = ({children}) => {
     const [user, setUser] = useState(null);
     const [isLoading, setIsLoading] = useState(true); // 添加加载状态标记
   
     useEffect(() => {
         // 模拟后端请求，实际项目替换为真实接口调用
         const fetchUser = async () => {
           const loginUser = {
             userId: 1,
             role: "Admin"
           };
           setUser(loginUser);
           setIsLoading(false); // 请求完成后关闭加载状态
         };
   
         fetchUser();
       }, []);
   
     return (
       <AuthContext.Provider value={{user, isLoading}}>{children}</AuthContext.Provider>
     );
   };
   

2. 调整useAuth，返回完整上下文
   让useAuth返回包含user和isLoading的上下文对象：

   const useAuth = () => {
       const context = useContext(AuthContext);
       if (context === undefined) {
         throw new Error('useAuth must be used within an AuthProvider');
       }
       return context;
   };
   
   export default useAuth;
   

3. 修改ProtectedRoutes，处理加载状态
   在加载过程中显示占位内容，避免直接跳转：

   const ProtectedRoutes = () => {
     const {user, isLoading} = useAuth();
   
     // 加载中时显示加载提示，可替换为自定义加载组件
     if (isLoading) {
       return <div>加载中...</div>;
     }
   
     return user ? <Outlet/> : <Navigate to="/login"/>;
   }
   
   export default ProtectedRoutes;
   

补充：实际项目的错误处理 #

真实场景中后端请求需添加错误处理，确保无论请求成功或失败，都能关闭加载状态：

const fetchUser = async () => {
  try {
    const response = await fetch('/api/current-user');
    const loginUser = await response.json();
    setUser(loginUser);
  } catch (error) {
    console.error('获取用户信息失败:', error);
  } finally {
    setIsLoading(false); // 无论结果如何，都结束加载状态
  }
};

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