在React Router V6中实现RBAC保护路由时出错

Question

我知道如何在 React Router V6 中实现受保护的路由，但我想采用更模块化的方法，我的应用程序很大，我想分离所有基于角色的路由。例如：将有一个“AdminRoutes”组件，其中包含管理员的所有路由，然后我将其添加为“ProtectedRoute”子组件，简而言之，而不是这个：

  <Routes>
    <Route element={<ProtectedRoutes/>}>
      <Route path='/admin' element={<AdminPage/>}/>
      <Route path='/profile' element={<Profile/>}/>
    </Route>
  </Routes>

我想要这个：

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

AdminRoutes 组件将返回管理路由，例如：

  export function AdminRoutes() {
      return (
              <>
                 <Route path='/admin' element={<AdminPage/>}/>
                 <Route path='/profile' element={<Profile/>}/>
              </>
      )
  }

注意：ProtectedRoutes 组件将返回子级（出口）或基于某些逻辑导航到不同的路由 目前它给我的错误是“未捕获的错误：所有组件子项都必须是 a 或 ”，我所说的可能吗？如果您知道比这更好的方法，我也想知道！！

Answer 1

目前它给我的错误是“未捕获的错误：所有组件 的孩子必须是

<Route />

或

<React.Fragment>

”

您无法直接渲染

Route

组件，它 必须 有一个

Routes

组件作为其父级，或者在嵌套路由的情况下有另一个

Route

组件。

在

AdminRoutes

中将路由包装在

Routes

组件中。

export function AdminRoutes() {
  return (
    <Routes>
      <Route path="/admin" element={<AdminPage />} />
      <Route path="/profile" element={<Profile />} />
    </Routes>
  );
}

我说的可能吗？

是的，但由于您要将嵌套路由转换为后代路由，因此主路由器需要在路由上渲染

AdminRoutes

，而不是单独将其本身作为

Route

的子级（出于与上述相同的原因）。

将

AdminRoutes

渲染为

path="/*"

上的路由组件，并带有尾随 splat，以便所有后代路由（例如在组件的

Routes

组件中渲染的路由）也可以匹配和渲染。

<Routes>
  <Route element={<ProtectedRoutes />}>
    <Route path="/*" element={<AdminRoutes />} />
  </Route>
</Routes>

演示