如何修复React Router v6刷新首页时短暂闪现登录页的问题

问题根因 #

闪屏的核心原因是 认证状态初始化存在空窗期：

• 页面刷新时，useAuth 中存储的用户登录态还没完成初始化（比如需要从localStorage读取token、发请求校验token有效性、拉取用户信息），初始状态下 auth.user 为空
• 此时路由守卫的判断逻辑提前执行：PrivateRoute 判定用户未登录，跳转到 /login；PublicRoute 判定无用户信息，直接渲染登录页组件
• 等认证状态初始化完成，确认用户已登录后，PublicRoute 又会触发跳转回首页，就出现了登录页短暂闪现的问题
• 原有逻辑里的 Navigate 组件没加 replace 属性，还可能污染路由历史栈，导致返回键异常

修复步骤 #

1. 给认证上下文增加加载态标识 #

在Auth上下文里新增loading状态，标记登录态校验是否完成，校验期间不做路由跳转、不渲染业务页面，统一显示加载占位。
参考实现：

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  // 初始为true，代表正在校验登录态
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const initAuth = async () => {
      try {
        const token = localStorage.getItem('access_token');
        if (token) {
          // 替换为自身业务的登录态校验逻辑：比如拉取用户信息、校验token有效性
          // const userInfo = await api.getCurrentUser();
          // setUser(userInfo);
        }
      } catch (e) {
        // 校验失败清除无效凭证
        localStorage.removeItem('access_token');
        setUser(null);
      } finally {
        // 校验完成，关闭加载态
        setLoading(false);
      }
    };
    initAuth();
  }, []);

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

export const useAuth = () => useContext(AuthContext);

记得要把AuthProvider包裹在路由组件的外层，保证路由里能拿到上下文状态。

2. 改造路由守卫逻辑，加载态优先判断 #

不管是私有路由还是公共路由，先判断是否处于认证加载状态，加载中直接返回全局加载组件（可以替换为项目里的骨架屏、Loading动画），等加载完成再走权限判断逻辑，同时给Navigate加上replace属性替换历史记录。
改造后的私有路由：

const PrivateRoute = () => {
  const auth = useAuth();

  // 认证状态未就绪时，渲染加载占位
  if (auth.loading) {
    return <div>加载中...</div>; // 可替换为自定义Loading组件
  }

  if (!auth.user) {
    // 加replace替换当前路由记录，避免污染历史栈
    return <Navigate to="/login" replace />;
  }

  return <Outlet />;
};

改造后的公共路由：

const PublicRoute = () => {
  const auth = useAuth();

  // 认证状态未就绪时，同样渲染加载占位，避免提前渲染登录/注册页
  if (auth.loading) {
    return <div>加载中...</div>;
  }

  if (auth.user) {
    return <Navigate to="/" replace />;
  }

  return <Outlet />;
};

效果验证 #

改完后刷新页面，在认证态校验完成前只会显示加载状态，不会提前渲染登录页，等状态确认后直接渲染对应权限的页面，闪屏问题就消失了。

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