React Router Switch 和确切路径

我读过这份文件反应路由器开关 https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md

我了解交换机和路由的定义

但有些地方还是不太明白

如果我只想选择一条路线进行渲染，我们可以像这样使用 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>

我对吗 ？

尽管在您的情况下，您可以使用精确获得相同的效果，但情况可能并不总是如此。但是，如果您的路由之一包含嵌套路由，则如果您在顶层有确切的路由，则无法使用嵌套路由。

Switch在上述情况下达到目的，因为它仅呈现第一个匹配

例如，

假设 Home 路线包含嵌套路线，例如

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

所以现在如果你写

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

当你访问时/dashboard. That Dashboard由于没有路由匹配，因此无法渲染组件/dashboard在顶层。

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

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