React Router v6：如何在权限校验组件中获取子路由permission属性？

你现在每个页面组件都调用hook的思路，会导致代码重复、组件和权限逻辑耦合度高，这里给你两个更简洁的优化方案：

方案一：封装带权限校验的路由组件（推荐） #

把权限校验逻辑统一封装到一个路由组件里，页面组件完全不用关心权限相关代码，只专注业务逻辑。

步骤1：封装ProtectedRoute组件 #

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

// 假设你有获取当前用户权限的方法，比如从全局状态/localStorage读取
const getCurrentUserPermission = () => {
  return localStorage.getItem('userPermission') || '';
};

const ProtectedRoute = ({ requiredPermission }) => {
  const userPermission = getCurrentUserPermission();

  // 权限匹配逻辑，可根据需求扩展（比如支持多权限、角色组）
  if (userPermission === requiredPermission) {
    // 权限通过，渲染子路由内容
    return <Outlet />;
  }

  // 权限不通过，跳转到登录页或无权限页面
  return <Navigate to="/login" replace />;
};

步骤2：调整路由配置与渲染逻辑 #

先修正路由数组的字段错误（原route字段应改为path，否则route.path会报错）：

const myRoutes = [
  { path: '/home', element: <Home />, permission: 'admin' },
  { path: '/about', element: <About />, permission: 'agent' },
];

然后修改路由渲染逻辑，用ProtectedRoute作为权限校验容器：

<Routes>
  {/* 公共路由直接放置，比如登录页 */}
  <Route path="/login" element={<Login />} />

  {/* 遍历生成带权限校验的路由 */}
  {myRoutes.map((route) => (
    <Route 
      key={route.path}
      element={<ProtectedRoute requiredPermission={route.permission} />}
    >
      <Route path={route.path} element={route.element} />
    </Route>
  ))}
</Routes>

这种方式把权限逻辑完全抽离到独立组件，后续修改权限规则只需要改动ProtectedRoute，所有页面组件无需调整。

方案二：用高阶组件包裹页面元素 #

如果不想额外封装路由组件，也可以用高阶组件直接包裹页面组件，统一注入权限校验：

import { Navigate } from 'react-router-dom';

const getCurrentUserPermission = () => {
  return localStorage.getItem('userPermission') || '';
};

// 权限校验高阶组件
const withPermissionCheck = (WrappedComponent, requiredPermission) => {
  return () => {
    const userPermission = getCurrentUserPermission();
    if (userPermission !== requiredPermission) {
      return <Navigate to="/login" replace />;
    }
    return <WrappedComponent />;
  };
};

// 修改路由数组，直接用高阶组件包裹页面元素
const myRoutes = [
  { path: '/home', element: withPermissionCheck(Home, 'admin') },
  { path: '/about', element: withPermissionCheck(About, 'agent') },
];

// 路由渲染逻辑
<Routes>
  <Route path="/login" element={<Login />} />
  {myRoutes.map((route) => (
    <Route key={route.path} path={route.path} element={route.element()} />
  ))}
</Routes>

这种方式也能实现逻辑统一，但相比封装路由组件，灵活性稍差，比如无法直接支持嵌套路由的权限校验。

关键注意点 #

React Router的Route组件不支持自定义permission属性，你原来给Route加permission={route.permission}的写法是无效的，不会被React Router处理，必须通过上述方式把权限逻辑和路由/页面组件绑定。

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