如果现在的URL是 /about ，那么 <About> , <User> , 还有 <NoMatch> 都会被渲染，因为它们都与路径(path)匹配。这种设计，允许我们以多种方式将多个 <Route> 组合到我们的应用程序中，例如侧栏(sidebars)，面包屑(breadcrumbs)，bootstrap tabs等等。 然而，偶尔我们只想选择一个 <Route> 来渲染。如果我们现在处于 /about ，我们也不希望匹配 /:user （或者显示我们的 “404” 页面 ）。以下是使用 Switch 的方法来实现：
<Switch> <Route exact path="https://www.jb51.net/" component={Home}/> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch>
现在，如果我们处于 /about ， <Switch> 将开始寻找匹配的 <Route> 。 <Route path="/about"/> 将被匹配， <Switch> 将停止寻找匹配并渲染 <About> 。同样，如果我们处于 /michael ， <User> 将被渲染。
以上就是我对React Router v4 的初试，反正也是一边查文档，一边试水的，如有错误或疏漏，还请大家谅解并不吝指正！也希望大家多多支持脚本之家。
您可能感兴趣的文章: