React Router v6迁移报错：[undefined]不是<Route>组件

错误原因 #

React Router v6 对<Routes>的子元素有严格限制：直接子节点必须是<Route>或<React.Fragment>（Fragment内也只能包含<Route>）。你的代码中直接将自定义组件<AuthRoute>作为<Routes>的子元素，尽管<AuthRoute>内部返回<Route>，但外层的<AuthRoute>本身并非<Route>组件，因此触发了该报错。

修复方案 #

1. 改造AuthRoute为路由元素包装组件 #

不再让AuthRoute返回<Route>，而是让它作为权限校验的包装层，接收需要渲染的组件作为子元素：

// AuthRoute.tsx
const AuthRoute: React.FC<AuthRouteProps> = ({
  children,
  requiredPermission,
  user,
}) => {
  // 保留你的权限判断逻辑：isAuthorized、userHasRequiredPermission、isPermissionsLoading
  return isAuthorized && userHasRequiredPermission && !isPermissionsLoading ? (
    children
  ) : isPermissionsLoading ? (
    <Loader spinning />
  ) : (
    <Navigate
      to={userHasRequiredPermission ? '/user/login/' : '/404'}
      state={{ requestedPath: window.location.pathname }}
    />
  )
}

2. 调整路由渲染逻辑 #

所有路由统一使用<Route>组件，需要权限校验的路由将组件放入<AuthRoute>中，作为<Route>的element属性值：

// router.tsx
const router: React.FC = () => (
  <Suspense fallback={<Loader spinning />}>
      <BrowserRouter>
        <IndexLayout>
          <ReactRoutes>
            {routes.map(route => {
              const RouteElement = route.component;
              return (
                <Route
                  path={route.path}
                  key={route.path}
                  element={
                    route.requiredPermission ? (
                      <AuthRoute requiredPermission={route.requiredPermission}>
                        <RouteElement />
                      </AuthRoute>
                    ) : (
                      <RouteElement />
                    )
                  }
                />
              )
            })}
            <Route path='/403' element={<UnAuthorizedPage />} />
            {/* v6中404路由必须使用path='*'匹配所有未定义路径 */}
            <Route path='*' element={<NotFoundPage />} />
          </ReactRoutes>
        </IndexLayout>
      </BrowserRouter>
  </Suspense>
)

额外注意事项 #

• React Router v6 移除了exact属性，路由默认采用精确匹配（仅当路径包含/*通配符时才会模糊匹配）
• 404路由必须显式设置path='*'，无path的<Route>在v6中不再生效

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