反应路由器开关和确切路径

Question

我已经阅读了有关react-router Switch的文档

我了解有关“交换机和路由”的定义

但仍然无法理解某些要点

如果我只想选择一条路线进行渲染，我们将使用Switch这样的

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
</Switch>

我不明白的一点是，没有Switch我可以得到相同的效果

 <Route exact path="/" component={Home} />
 <Route path="/a" component={A} />
 <Route path="/b" component={B} />

那为什么要使用Switch？我们什么时候需要使用Switch？

---

我发现需要使用Switch的情况

如果我想在没有路径匹配时渲染特定的组件

我们需要像这样将Route包装在Switch中

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
  <Route component={SpecificComponent} />
</Switch>

我对吗？

Answer 1

尽管根据您的情况，您可以使用“精确”获得相同的效果，但并非总是如此。但是，在其中一个路由包含嵌套路由的情况下，如果顶层具有确切的路由，则无法使用嵌套路由。

在上述情况下，

Switch可达到目的，因为它仅呈现第一个匹配项

例如，

说“返乡”路线包含类似的嵌套路线

const Home = (props) => (
     <div>
          <Route path="/dashboard" component={Dashboard}/>
          <Route path="/layout" component={Layout}/>
     </div>
)

所以现在如果你写

<Route exact path="/" component={Home} />

以及您访问/dashboard时。该Dashboard组件无法呈现，因为没有路由与顶层的/dashboard匹配。

为了使示例正确运行，可以使用Switch并对路由进行重新排序，以使其他路径的前缀路径位于末尾

<Switch>
  <Route path="/a" component={A} />
  <Route path="/b" component={B} />
  <Route path="/" component={Home} />
</Switch>

Answer 2

让我列出Route、exact和Switch的不同特征：

• Route 进行部分匹配。路由的路径包含匹配（匹配多个）。

• exact 删除部分匹配。它可能匹配多个路由，以防我们在路由中使用通配符。

• Switch 仅呈现第一个匹配的路由。 Switch 路径仅匹配（仅匹配一个）。

为了详细解释，我想说明路由匹配如何使用和不使用 exact。假设我们有以下代码并且我们没有使用 exact。

因此，如果我们访问 /pagetwo URL，Route 将进行部分匹配并渲染两个路由。让我们看看它是如何发生的。在下图中，我们正在查看地址栏和我们导航到的路径（提取路径）以及匹配的路由。因此，当 Route 评估为真时，extractedPath.contains(path-in-our-Route-declaration) 将呈现路线。

希望阐明 Route 在幕后的工作原理。为了避免这种部分匹配，我们使用 exact。使用 exact 可以解决问题，直到我们遇到一些特殊情况。假设我们有两条路线，如：

• /users/create
• /users/*（路径中的通配符）。

在上述情况下，exact 将匹配两条路线。因此，要解决此类问题，我们可以使用 Switch。它只呈现一条路线，并且首先匹配任何路线。因此，在这里定义路由的顺序很重要。

Answer 3

基本上，“ exact”关键字具有相同的用途。 （注意：使用的匹配算法会检查当前URL是否以此路径开头。）但是，当使用时，Route声明或Specificity的顺序很重要。需要在顶部添加更具体的路由。就您而言

<Switch>
<Route path="/a" component={A} />
<Route path="/b" component={B} />
<Route exact path="/" component={Home} />
</Switch>

在“精确”的情况下，当您传递“精确”时，仅当路径完全匹配时，此路由才会匹配。在您的情况下，主路径设置为精确。

<Route exact path="/" component={Home} />
<Route path="/a" component={A} />
<Route path="/b" component={B} />