React Router v6登录状态刷新页面停留当前页不跳转/dashboard问题

刷新页面后无法停留在当前受保护路由，核心是路由守卫没有处理Firebase Auth的异步登录态恢复逻辑：

• react-firebase-hooks的useAuthState钩子在页面初始化/刷新时，需要异步校验本地存储的登录凭证，这个校验过程中loading状态为true，user字段暂时返回null
• 你当前的PrivateRoutes组件没有等待校验完成，在user为null的初始化阶段就判定用户未登录，触发到登录页的重定向；如果你的登录页自带“已登录用户自动跳转至/dashboard”的逻辑，就会直接把用户带到仪表盘页面，无法停留在刷新前的/predict-scores路径。

1. 路由守卫增加加载状态判断 #

在登录态校验完成前不要做任何路由跳转，先渲染加载占位内容，等状态明确后再判断是放行还是跳登录页。修改PrivateRoutes.tsx代码如下：

import { useAuthState } from "react-firebase-hooks/auth";
import { Navigate, Outlet, useLocation } from "react-router-dom";
import { auth } from "../../services/firebase/firebase-auth";

export const PrivateRoutes = () => {
    const location = useLocation();
    // 解构出loading加载状态
    const [user, loading] = useAuthState(auth);

    // 登录态校验过程中返回加载提示，不触发路由跳转
    if (loading) {
        return <div>校验登录状态中...</div>;
    }

    return user ? (
        <Outlet />
    ) : (
        <Navigate to="/login" replace state={{ from: location }} />
    );
};

2. 登录页增加来源路径跳转逻辑 #

你之前跳登录页时已经通过state.from记录了用户原本访问的路径，需要在登录页登录成功（或检测到用户已登录）时，优先跳回该路径，没有记录来源时再默认跳转至/dashboard。
登录页核心逻辑参考：

import { useLocation, useNavigate } from "react-router-dom";
// 其余业务导入省略

const Login = () => {
    const navigate = useNavigate();
    const location = useLocation();
    // 读取重定向前的来源路径
    const targetPath = location.state?.from?.pathname || "/dashboard";

    // 检测到已登录直接跳目标路径
    // 这里可以结合你自己的auth状态判断逻辑写
    // if (user) {
    //     navigate(targetPath, { replace: true });
    // }

    // 账号密码登录成功后的回调
    const handleLoginSuccess = () => {
        navigate(targetPath, { replace: true });
    };

    // 其余登录页表单、UI逻辑省略
};

你在App.tsx里的根路径重定向写法可以调整为React Router v6推荐的index路由形式，同时给重定向组件加上replace属性，避免返回按钮陷入重定向循环：

<Route path="/" element={<PrivateRoutes />}>
    {/* 用index路由替代原path="/"的重定向子路由 */}
    <Route index element={<Navigate to="/dashboard" replace />} />
    <Route path="/dashboard" element={<Dashboard />} />
    <Route path="/results" element={<Results />} />
    <Route path="/predict-scores" element={<Predict />} />
</Route>

改完之后，刷新受保护路由页面时，会先等待Firebase恢复登录态，已登录用户直接停留在当前页面，不会再出现自动跳回/dashboard的问题。

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