javascript - 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} />

这可能是更好的方法。但我只是好奇它如何/为什么忽略自定义组件后的路由。为什么我无法在示例中渲染 Route2？

这是一个工作 fiddle https://jsfiddle.net/o4dtrpag/

Answer 1

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