已用Routes包裹Route仍报错：需将Route嵌套在Routes元素内

你遇到的错误根源在于：在<Route>的element属性内部嵌套了<Route>组件。React Router v6的规则非常明确——只有<Routes>组件才能直接作为<Route>的父容器，任何普通组件（包括你自定义的IsUserLoggedIn、ProtectedRoute）内部都不能直接渲染<Route>。

修正方案 #

删除嵌套在权限校验组件内部的<Route index ... />，直接渲染对应的页面组件即可。外层<Route>已经指定了匹配路径，当路径匹配时，element属性中的内容会直接渲染，不需要额外嵌套index Route。

修正后的代码 #

<Routes>
  <Route
    path={ROUTES.LOGIN}
    element={
      <IsUserLoggedIn user={user} loggedInPath={ROUTES.DASHBOARD} navigate={Navigate}>
        <Login />
      </IsUserLoggedIn>
    }
  />
  <Route
    path={ROUTES.SIGN_UP}
    element={
      <IsUserLoggedIn user={user} loggedInPath={ROUTES.DASHBOARD} navigate={Navigate}>
        <Signup />
      </IsUserLoggedIn>
    }
  />
  <Route path={ROUTES.PROFILE} element={<Profile />} />
  <Route
    path={ROUTES.DASHBOARD}
    element={
      <ProtectedRoute user={user} navigate={Navigate}>
        <Dashboard />
      </ProtectedRoute>
    }
  />
  <Route path="/" element={<NotFound />} />
</Routes>
</Suspense>
</Router>

额外说明 #

你的自定义权限组件（IsUserLoggedIn、ProtectedRoute）的核心逻辑应该是：完成权限校验后，直接渲染传入的children（即页面组件）；校验不通过时执行跳转逻辑，不要尝试在组件内部处理路由嵌套。

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