将单个交换机内的路由拆分为多个组件

Question

我正在使用React Router v5，当我尝试在多个组件之间定义路由时遇到了问题。 我尝试的情况类似于以下内容：

<Switch>
  <MyRoutes />
  <Route path="/foo">
    <Foo />
  </Route>
</Switch>

使用以下代码，可创建一个名为MyRoutes的组件：

<>
  <Route path="/bar">
    <Bar />
  </Route>
  <Route path="/baz">
    <Baz />
  </Route>
</>

现在的问题是，在自定义 MyRoutes 组件之后声明的路由无法正常工作，自定义组件似乎匹配了路由但并没有渲染任何内容。其中的路由确实按预期工作。

我将路由拆分为此的原因之一是，除了将相关路由组织在一起之外，我还需要单独的路由组件作为独立的组件，以便将一组组件集成到传统 Web 应用程序中。我想避免在此处复制路由。

但显然，我正在做一些你不应该在React Router 中做的事情，尽管我不完全确定为什么会出现这个问题。因此，我希望更多地了解此处的限制，以避免在将来再次遇到此类变化。为什么我不能将路由像这样拆分为单独的组件在单个 Switch 中？这里的确切限制是什么？

是否在每个组件中放置一个单独的 Switch 是正确的答案？从概念上讲，这似乎是错误的，因为每个路由都应该是互斥的，只有一个路由应该被渲染。多个 Switch 组件可以同时呈现多个组件，尽管在实践中不应该发生这种情况，因为路由应该是独占的，不应重叠。

在React Router v5中具有模块化路由的适当和预期方法是什么？

- Fabian

Answer 1

问题

路由器在匹配时使用「包容模式」，即返回和渲染所有符合条件的路由；而Switch组件使用「排他模式」，只返回并渲染第一个找到的匹配路由。虽然不是强制性规定，但这个组件的有效子组件只有Route和Redirect，如果在Switch里面渲染其他任何组件，则该组件会被返回并渲染，路由匹配则完成，之后再添加的路由将不可达。

Switch

渲染首个与位置匹配的<Route>或<Redirect>子组件。

这与只使用大量的<Route> 有何不同?

<Switch> 独特之处在于它仅以排他模式渲染一项路由。相比之下，所有符合路由匹配的<Route> 按照包容模式全部渲染。

解决方法

将MyRoutes在一个独立的路由上进行渲染，这样Switch组件就可以管理路径匹配和渲染。我建议使用path="/" , 这样嵌套的路由也可以进一步匹配。

<Switch>
  <Route path="/foo">
    <Foo />
  </Route>
  <Route
    path="/" // <-- allows matching "/bar" and "/baz"
    component={MyRoutes}
  />
</Switch>

MyRoutes

您还需要将这些路由渲染到一个Switch组件中。每当您想要排他性地匹配路由时，就会使用Switch组件。

<Switch>
  <Route path="/bar">
    <Bar />
  </Route>
  <Route path="/baz">
    <Baz />
  </Route>
</Switch>

还要记住，在 Switch 组件内，路径的顺序和特定性很重要。您需要按照路径特定性的相反顺序对路由进行排序。这是为了首先匹配和呈现更具体的路径，然后降级到不太具体的路径。

例如：

<Switch>
  <Route path="/segment1/segment2/page" component={....} />
  <Route path="/segment1/page" component={....} />
  <Route path="/segment1" component={....} />
</Switch>

- Drew Reese