为什么React Router的Switch组件总是只渲染排在第一个的子组件？

问题原因 #

React Router v5 的 <Switch> 组件的匹配逻辑为：仅识别直接子节点中的 <Route> 或 <Redirect> 组件，渲染第一个和当前路径匹配的项，不会嵌套遍历子组件内部的路由规则。
你当前的写法将 <Suspense> 作为 <Switch> 的直接子节点，<Switch> 无法识别 <Suspense> 内部的路由规则，因此永远只会渲染第一个 <Suspense> 子节点，不会按路由匹配逻辑向后查找，所以出现了谁放在上层就渲染谁的问题。

解决方法 #

方案1：将Suspense放到Route内部，保证Switch的直接子节点均为Route #

<Switch>
  <Route exact path="/">
    <Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
      <Home />
    </Suspense>
  </Route>
  <Route>
    <Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
      <ErrorPage />
    </Suspense>
  </Route>
</Switch>

这样<Switch>可以正常识别所有路由规则，路径不匹配时会自动 fallback 到没有指定path的ErrorPage路由。

方案2：将Suspense提取到Switch外层统一包裹（适合所有路由都需要相同加载态的场景） #

<Suspense fallback={<div>Daha sonra tekrar deneyin.</div>}>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route component={ErrorPage} />
  </Switch>
</Suspense>

这个写法更简洁，所有懒加载路由的加载 fallback 都会复用同一份逻辑，也不会破坏<Switch>的路由匹配规则。

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