React Router V6中RBAC受保护路由模块化实现报错求助

你这种直接在<Route>子节点中放置自定义组件的写法不可行，报错原因是React Router V6对<Route>的子元素类型有严格限制——只能是<Route>、<React.Fragment>或它们的数组，而你的<AdminRoutes>是自定义组件，哪怕内部返回Fragment包裹的Route，外层依然是自定义组件元素，不符合校验规则。

以下是两种可行的优化方案：

方案1：让自定义路由组件返回Route数组 #

修改AdminRoutes，直接返回Route元素组成的数组，而非用Fragment包裹：

export function AdminRoutes() {
  return [
    <Route key="admin-route" path='/admin' element={<AdminPage />} />,
    <Route key="profile-route" path='/profile' element={<Profile />} />
  ];
}

使用时通过函数调用展开数组：

<Routes>
  <Route element={<ProtectedRoutes />}>
    {AdminRoutes()}
  </Route>
</Routes>

这种方式保持了路由的模块化拆分，同时符合React Router的子元素规则。

方案2：嵌套角色保护路由（推荐） #

将AdminRoutes设计为角色校验的路由容器组件，配合<Outlet>实现嵌套路由，更贴合React Router V6的设计理念：

1. 实现带角色校验的AdminRoutes：

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

export function AdminRoutes() {
  // 替换为你的用户角色校验逻辑
  const currentUser = JSON.parse(localStorage.getItem('user'));
  
  // 非管理员用户直接跳转
  if (!currentUser || currentUser.role !== 'admin') {
    return <Navigate to="/unauthorized" replace />;
  }

  // 校验通过，渲染子路由
  return <Outlet />;
}

2. 重构路由结构，通过嵌套Route组织角色专属路由：

<Routes>
  {/* 基础登录校验的受保护路由容器 */}
  <Route element={<ProtectedRoutes />}>
    {/* 管理员专属路由容器，嵌套在基础保护路由内 */}
    <Route element={<AdminRoutes />}>
      <Route path='/admin' element={<AdminPage />} />
      <Route path='/profile' element={<Profile />} />
    </Route>
    
    {/* 其他普通受保护路由 */}
    <Route path='/dashboard' element={<Dashboard />} />
  </Route>

  {/* 公开路由 */}
  <Route path='/login' element={<Login />} />
  <Route path='/unauthorized' element={<UnauthorizedPage />} />
</Routes>

这种方案的优势：

• 角色校验逻辑与路由结构分离，代码更清晰
• 符合React Router V6的嵌套路由设计，扩展性更强（后续新增管理员路由只需在AdminRoutes的子Route中添加）
• 多层校验逻辑分层明确（先过基础登录校验，再过角色校验）

内容的提问来源于stack exchange，提问作者Kalpana Media House