React Router v5单Switch内拆分路由到多组件失效问题咨询

问题根源 #

React Router v5 的 <Switch> 组件仅会渲染第一个与当前URL匹配的直接子节点，匹配逻辑仅校验直接子节点的 path 属性，不会深入自定义组件内部遍历 <Route> 做匹配判断。
你的代码中 <MyRoutes /> 作为 <Switch> 的第一个直接子节点，没有配置 path 属性，会被 <Switch> 默认判定为永久匹配，因此无论访问任何路径，<Switch> 都会直接渲染 <MyRoutes />，截断后面所有路由的匹配逻辑：

• 访问 /bar、/baz 时，<MyRoutes /> 内部的 <Route> 正常匹配，渲染对应组件
• 访问 /foo 时，<MyRoutes /> 内部没有匹配路由，无内容渲染，后面的 /foo 路由永远不会被触发

路由拆分的核心限制 #

不要将封装了 <Route> 的自定义组件作为 <Switch> 的直接子节点，除非你为该自定义组件配置了专属的 path 前缀（即嵌套路由场景）。

常见错误方案避坑 #

给每个拆分的路由组件单独加 <Switch> 无法解决你的问题：只要自定义组件还是放在父级 <Switch> 的第一个直接子节点，还是会被判定为永久匹配，后面的路由依然无法生效。
无关联的多顶层 <Switch> 确实存在多个路由同时匹配渲染的风险，仅嵌套路由场景下的父子层级 <Switch> 是安全的。

v5 版本路由模块化的规范方案 #

方案1：抽离路由配置数组（最适合跨项目复用场景） #

将需要复用的路由定义为纯配置数组，在使用处直接遍历渲染，保证所有 <Route> 都是 <Switch> 的直接子节点，匹配逻辑完全符合预期。
定义公共路由配置：

// myRoutes.js 可直接复用到老旧项目
import Bar from './Bar'
import Baz from './Baz'

export const myRoutes = [
  {
    path: '/bar',
    element: <Bar />
  },
  {
    path: '/baz',
    element: <Baz />
  }
]

父组件中使用：

import { myRoutes } from './myRoutes'
import Foo from './Foo'

function App() {
  return (
    <Switch>
      {/* 遍历渲染公共路由 */}
      {myRoutes.map(route => (
        <Route key={route.path} path={route.path}>
          {route.element}
        </Route>
      ))}
      {/* 本地业务路由 */}
      <Route path="/foo">
        <Foo />
      </Route>
    </Switch>
  )
}

方案2：嵌套路由（适合同模块路由归类） #

如果拆分的路由都属于同一个业务模块，可统一添加路径前缀，使用嵌套路由实现拆分：
父组件路由：

<Switch>
  {/* 匹配所有/my前缀的路径，渲染子路由组件 */}
  <Route path="/my" component={MyRoutes} />
  <Route path="/foo">
    <Foo />
  </Route>
</Switch>

子路由组件 MyRoutes：

function MyRoutes() {
  return (
    // 子级Switch仅在路径匹配/my前缀时才会触发，不会和父级路由冲突
    <Switch>
      <Route path="/my/bar">
        <Bar />
      </Route>
      <Route path="/my/baz">
        <Baz />
      </Route>
    </Switch>
  )
}

这种场景下的多层 <Switch> 是安全的，子级 <Switch> 仅在父级路由匹配后才会执行匹配逻辑，不会出现多路由同时渲染的问题。

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