React Router V6 如何基于父路由参数渲染不同路径的子路由

问题原因 #

React Router v6 有严格的组件嵌套规则：所有 <Route> 组件必须直接作为 <Routes> 组件的子元素，或父级 <Route> 的 children 属性值。你当前的实现中 OtherRoutes 直接返回 <Route> 且外层没有包裹 <Routes>，同时父级路由没有配置通配符匹配子路径，所以路由无法正常识别。

方案1：嵌套Routes适配（最低改造成本） #

1. 先修改父路由配置，给:locale路径加通配符/*，允许匹配子路径：

<BrowserRouter>
    <Routes>
        <Route path=":locale/*" element={<OtherRoutes/>} />
        <Route path="*" element={<p>404</p>} />
    </Routes>
</BrowserRouter>

2. 改造OtherRoutes组件，在外层包裹<Routes>：

const OtherRoutes = () => {
    const {locale} = useParams();

    return (
      <Routes>
        {locale === "de" ? (
          <Route path="seite" element={<GermanPage/>}/>
        ) : (
          <Route path="page" element={<EnglishPage/>}/>
        )}
        {/* 可选配置当前语言下的404兜底 */}
        <Route path="*" element={<p>当前语言下暂无该页面</p>} />
      </Routes>
    )
}

修改后访问/de/seite会渲染德语页面，访问/en/page会渲染英文页面，其余路径走404逻辑。

方案2：useRoutes钩子配置（适合路由集中管理场景） #

如果你的项目路由是集中配置的，可以用useRoutes钩子实现更灵活的动态路由生成：

// 顶层App组件
import { useRoutes } from 'react-router-dom'

const App = () => {
  const routeConfig = useRoutes([
    {
      path: ':locale/*',
      element: <OtherRoutes />
    },
    {
      path: '*',
      element: <p>404</p>
    }
  ])
  return routeConfig
}

// OtherRoutes组件
const OtherRoutes = () => {
  const { locale } = useParams()
  const subRouteConfig = useRoutes([
    locale === 'de' 
      ? { path: 'seite', element: <GermanPage /> }
      : { path: 'page', element: <EnglishPage /> },
    { path: '*', element: <p>当前语言下暂无该页面</p> }
  ])
  return subRouteConfig
}

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