React中useState未更新状态？受保护路由跳转异常求助

你的核心问题是组件在axios请求完成前，就已经基于初始的res=false执行了跳转，后续setRes更新状态时，组件已被卸载，自然不会生效。此外缺少加载状态也会导致逻辑提前触发，以下是具体修复方案：

1. 添加加载状态，避免提前跳转 #

新增加载状态变量，在认证请求未完成时暂停路由判断，等待请求结果返回后再决定页面走向：

import { Outlet, Navigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import axios from 'axios';

const PrivateRoutes = () => {
    const [res, setRes] = useState(false);
    const [isLoading, setIsLoading] = useState(true); // 新增加载状态

    useEffect(() => {
        const getData = async () => {
            try {
                const response = await axios.get("http://localhost:3001/auth", { withCredentials: true });
                setRes(response.data.isLoggedIn);
            } catch (err) {
                // 处理请求失败场景，比如网络错误或后端异常
                console.error('认证请求失败:', err);
                setRes(false);
            } finally {
                setIsLoading(false); // 请求完成后结束加载
            }
        }
        getData();
    }, []);

    // 加载中时返回加载提示，避免提前执行路由跳转
    if (isLoading) {
        return <div>加载中...</div>; // 可替换为项目内的加载组件
    }

    return res ? <Outlet /> : <Navigate to="/login" />;
}

export default PrivateRoutes;

2. 完善登录后的跳转逻辑 #

登录成功后，需要手动触发路由导航，而不是仅依赖状态更新。因为PrivateRoutes只有在路由切换时才会重新渲染，手动导航才能触发它重新获取认证状态：

示例登录组件的成功逻辑：

const handleLogin = async () => {
    const loginRes = await axios.post("http://localhost:3001/login", userCredentials, { withCredentials: true });
    if (loginRes.data.success) {
        navigate('/'); // 手动跳转到首页，触发PrivateRoutes重新检查认证状态
    }
}

3. 额外排查点 #

• 确认浏览器Cookie配置：打开开发者工具的Application标签，检查后端设置的认证Cookie是否存在，且HttpOnly、SameSite等属性配置正确（避免跨域场景下Cookie无法携带）。
• 检查路由配置结构：确保PrivateRoutes作为父路由包裹所有受保护页面，示例配置如下：

<Routes>
    <Route path="/login" element={<Login />} />
    <Route element={<PrivateRoutes />}>
        <Route path="/" element={<Home />} />
        {/* 其他受保护子路由 */}
    </Route>
</Routes>

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