React Router v6嵌套保护路由问题：授权路由未触发

一、核心问题分析 #

1. AuthorizedRoutes日志不触发的原因
   你在AuthenticatedRoutes里用useEffect控制<Outlet/>的渲染，这是错误的。React组件的JSX渲染是同步执行的，useEffect是渲染完成后才会触发的钩子，初始渲染阶段AuthenticatedRoutes根本不会渲染<Outlet/>，作为子路由的AuthorizedRoutes自然不会挂载，日志也就打不出来。只有当useEffect执行后更新状态，才会重新渲染<Outlet/>，但此时可能已经错过路由初始化的时机。

2. 移出useEffect导致无限循环的原因
   如果把认证判断直接放在渲染逻辑里，未登录时用document.location.href跳转，会触发页面硬刷新。刷新后整个React应用重新初始化，登录状态还没来得及读取（比如从localStorage或API获取），又会被判断为未登录，再次触发跳转，形成无限循环。document.location.href是浏览器级别的跳转，会重置所有应用状态，而不是React Router的客户端跳转。

二、嵌套保护路由的可行实现方式 #

这种分层权限控制的嵌套路由方案完全可行，只需调整组件实现逻辑，用React Router原生的方式处理状态和跳转：

1. 正确实现AuthenticatedRoutes

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

function AuthenticatedRoutes() {
  // 用null表示登录状态加载中，避免初始渲染的错误判断
  const [isAuthenticated, setIsAuthenticated] = useState(null);

  useEffect(() => {
    // 模拟获取登录状态：可以从localStorage读取，或调用后端接口
    const checkAuthStatus = () => {
      const storedUser = localStorage.getItem('user');
      setIsAuthenticated(!!storedUser);
    };
    checkAuthStatus();
  }, []);

  // 加载中显示占位组件
  if (isAuthenticated === null) {
    return <div>加载中...</div>;
  }

  // 已认证则渲染子路由，否则跳转到登录页（用Navigate做客户端跳转，不刷新页面）
  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
}

2. 正确实现AuthorizedRoutes

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

function AuthorizedRoutes({ requiredPermission }) {
  const location = useLocation();
  const [hasPermission, setHasPermission] = useState(null);

  useEffect(() => {
    console.log('AuthorizedRoutes 已挂载，开始检查权限');
    // 从存储的用户信息中读取权限列表
    const user = JSON.parse(localStorage.getItem('user'));
    setHasPermission(user?.permissions?.includes(requiredPermission));
  }, [requiredPermission]);

  if (hasPermission === null) {
    return <div>加载中...</div>;
  }

  // 有权限则渲染子路由，否则跳转到无权限页面
  return hasPermission ? (
    <Outlet />
  ) : (
    <Navigate to="/unauthorized" state={{ from: location }} replace />
  );
}

3. 路由配置示例

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import AuthenticatedRoutes from './AuthenticatedRoutes';
import AuthorizedRoutes from './AuthorizedRoutes';
import Home from './Home';
import TextEditor from './TextEditor';
import Login from './Login';
import Unauthorized from './Unauthorized';

const router = createBrowserRouter([
  // 公开路由：无需登录即可访问
  { path: '/login', element: <Login /> },
  { path: '/unauthorized', element: <Unauthorized /> },

  // 已认证路由：登录用户可访问，作为父路由嵌套子路由
  {
    element: <AuthenticatedRoutes />,
    children: [
      { path: '/', element: <Home /> },
      // 授权路由：需登录且具备指定权限，嵌套在已认证路由下
      {
        element: <AuthorizedRoutes requiredPermission="UPDATE_TEXT" />,
        children: [{ path: '/text-editor', element: <TextEditor /> }],
      },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

三、关键优化点 #

• 用Navigate组件替代document.location.href：这是React Router的客户端跳转方式，不会刷新页面，能保留应用状态，避免无限循环。
• 增加加载状态：在获取登录/权限状态时，返回加载占位组件，避免初始渲染的错误判断。
• 同步渲染<Outlet/>：不要在useEffect里控制子路由的渲染，直接在组件的渲染逻辑中根据状态决定是否渲染<Outlet/>，保证子路由组件能及时挂载。

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