react-router-dom v6升级报错：<Routes>子元素仅允许为<Route>或<React.Fragment>

报错的核心原因是react-router-dom v6 正式版强化了 <Routes> 组件的子元素校验，仅允许直接嵌套 <Route> 或 <React.Fragment>，你之前把自定义路由组件作为 <Route> 的子节点传递，触发了校验规则，不需要完全重写路由定义逻辑，可按以下两种方案适配：

方案1：最小改动适配，无需重构现有逻辑 #

仅修改 App.jsx 中的路由渲染逻辑，把自定义组件从 <Route> 的子节点移动到 element 属性中即可：

// App.jsx 修改后
<Routes>
  {routes.map((route) => (
    <Route 
      key={route.path} 
      path={`${pathPrefix}/${route.path}/*`}
      element={<route.component />} // 自定义组件移到element属性
    />
  ))}
</Routes>

• 该方案完全兼容你现有的封装逻辑，FeatureRoutes 内部的 <Routes> 属于组件内部渲染逻辑，不会被外层的 <Routes> 校验，不会触发报错。

方案2：推荐写法，适配后端动态路由 #

如果需要统一管理路由（包括后端返回的动态路由），可以用v6提供的 useRoutes 钩子，完全通过配置对象生成路由树，不需要手动写 <Route> 标签：

1. 把封装的子路由改造为路由配置对象，比如FeatureRoutes对应的配置：

// Feature.jsx 新增路由配置
export const featureRouteConfig = [
  {
    path: "/",
    element: <Feature1 />
  },
  {
    path: "/*",
    element: <NotFound />
  }
]

2. 全局路由配置合并，后端拉取的动态路由映射后可直接插入配置数组：

// routes.jsx 改造
import { featureRouteConfig } from './Feature'

export const routes = [
  {
    path: "feature/*",
    children: featureRouteConfig
  },
  // 其他静态路由、映射后的后端动态路由都可以直接加入该数组
]

3. App.jsx 直接用useRoutes生成路由：

// App.jsx 修改后
import { useRoutes } from 'react-router-dom'

function App() {
  // 可在此处先拉取后端路由，映射为标准格式后合并到routes数组
  const routing = useRoutes(routes.map(route => ({
    ...route,
    path: `${pathPrefix}/${route.path}`
  })))
  return <>{routing}</>
}

• 该方案对动态路由适配性更强，后端返回的路由只要按规则映射为{path, element, children}格式的对象，就能直接加入配置数组，完全不会碰到嵌套组件的校验问题。

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