React-router-dom不会渲染在switch中自定义组件之后定义的路由

Question

我尝试了以模块化方式声明路由的不同方法。我遇到了一个奇怪的行为：

<Switch>
  <Route path='/1' component={Route1} />
  <ModuleLikeRoutes />
  <Route path='/2' component={Route2} />
</Switch>

React路由器完全忽略/ 2并且不呈现Route2。我找不到任何理由。我知道我可以导入一个'模块'组件

<Route path='/module' component={ModuleComponent} />

也许这是更好的方法。但我只是好奇它是如何/为什么忽略自定义组件后的路线。为什么我不能在示例中渲染Route 2？

这是一个工作小提琴https://jsfiddle.net/o4dtrpag/

Answer 1

一个Switch只会给它的一个孩子。如果路径与/1不匹配，它将检查第二个ModuleLikeRoutes，并且每次都会渲染，有效地使所有组件在它之后变得毫无意义。

Answer 2

我不确定它是否是库的错误或不支持的功能。但是，下面的代码通过将ModuleLikeRoutes命令到最后一个位置来工作。

<Switch>
  <Route path='/1' component={Route1} />
  <Route path='/2' component={Route2} />
  <ModuleLikeRoutes />
</Switch>