React Router v6 路由跳转时如何阻止未授权页面的短暂渲染

问题根因 #

你当前的实现存在两个核心问题导致闪屏：

• 权限校验逻辑为异步执行，校验完成前已经先返回了受保护组件进行渲染，等校验失败触发重定向时已经出现了肉眼可见的页面闪烁
• 路由配置中没有给/dashboard路由应用你编写的protectedRoute高阶组件，权限逻辑没有实际生效

改造步骤 #

1. 重写protectedRoute高阶组件 #

新增加载状态和权限状态，校验完成前渲染加载占位，校验不通过直接返回重定向组件，避免提前渲染受保护页面：

import { useEffect, useState } from "react";
import { Navigate } from "react-router-dom";
import { Auth } from "aws-amplify";

const protectedRoute = (Comp, route = "/login") => (props) => {
  const [isLoading, setIsLoading] = useState(true);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    const checkAuthState = async () => {
      try {
        await Auth.currentAuthenticatedUser();
        setIsAuthenticated(true);
      } catch (err) {
        setIsAuthenticated(false);
      } finally {
        setIsLoading(false);
      }
    };
    checkAuthState();
  }, []); // 空依赖数组保证校验逻辑仅在组件挂载时执行一次

  // 校验过程中渲染加载占位，可替换为项目统一的加载UI/骨架屏
  if (isLoading) return <div>加载中...</div>;
  // 校验未通过直接重定向，不会渲染目标组件
  if (!isAuthenticated) return <Navigate to={route} replace />;
  // 校验通过后再渲染受保护组件
  return <Comp {...props} />;
};

export default protectedRoute;

2. 修改路由配置，应用权限组件 #

给受保护的/dashboard路由绑定你写的权限逻辑：

// 可以提前封装受保护组件，让路由代码更整洁
const ProtectedDashboard = protectedRoute(Dashboard);

<Router>
  <Routes>
    <Route path="/" element={<Navigate to="/login" replace={true} />} />
    <Route path="/login" element={<Login />} />
    <Route path="dashboard/*" element={<ProtectedDashboard />} />
    <Route path="/signup" element={<Signup />} />
    <Route path="RecoverPassword" element={<RecoverPassword />} />
    <Route path="resetPassword" element={<ResetPassword />} />
    <Route path="verifycode" element={<VerifyCode />} />
    <Route path="policy" element={<>this is policy</>} />
  </Routes>
</Router>

优化建议 #

如果项目有全局状态管理工具（Redux、Zustand等），可以把登录状态存在全局，进入路由时直接读全局状态做校验，不需要每次都发异步请求，能进一步减少等待时间，提升体验。

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