Switch组件

react-router之Switch组件

本文内容整理参考借鉴以下文章：
https://www.jianshu.com/p/6583b7258e78
https://reacttraining.com/react-router/web/api/BrowserRouter

在此以表感谢！

渲染第一个匹配到地址(location)的<Route>或者<Redirect>

这与只使用一堆<Route>有什么不同?

< Switch>的独特之处是它仅仅渲染一个路由。相反地，每一个包含匹配地址(location)的<Route>都会被渲染。

import { Route } from "react-router";

let routes = (
  <div>
    <Route path="/about">
      <About />
    </Route>
    <Route path="/:user">  //动态路由
      <User />
    </Route>
    <Route>
      <NoMatch />
    </Route>
  </div>
);

如果现在的URL是 /about ，那么 <About>, <User>, 还有 <NoMatch> 都会被渲染，因为它们都与路径(path)匹配。这种设计，允许我们以多种方式将多个 <Route> 组合到我们的应用程序中，例如侧栏(sidebars)，面包屑(breadcrumbs)，bootstrap tabs等等。 然而，偶尔我们只想选择一个<Route> 来渲染。如果我们现在处于 /about，我们也不希望匹配 /:user （或者显示我们的 “404” 页面 ）。以下是使用 Switch 的方法来实现：

import { Route, Switch } from "react-router";

let routes = (
  <Switch>
    <Route exact path="/">
      <Home />
    </Route>
    <Route path="/about">
      <About />
    </Route>
    <Route path="/:user">
      <User />
    </Route>
    <Route>
      <NoMatch />
    </Route>
  </Switch>
);

现在，如果我们处于 /about, < Switch> 将开始寻找匹配的 <Route>。 <Route path="/about" /> 将被匹配， < Switch> 将停止寻找匹配并渲染<About>。 同样，如果我们处于 /michael ， < User> 将被渲染。

问题：
这里在网上查阅资料时，看见一位朋友的发帖问题，此处记录同时也学习一下，详情问题可见此链接：https://www.zhihu.com/question/278151042

现象：只展示 HomeLayout，没有展示 Login
网友解析：
Switch 的官方文档说明: Switch 只渲染到第一个匹配的 <Route> 或 <Redirect>. 代码中的 <HomeLayout /> 写在 <Login /> 之前, 为什么所有路径下 <HomeLayout /> 都能被渲染, 而 <Login /> 却不渲染. 这是因为 < Switch> 会去匹配其 children 的 <Route path=’’ /> 或 <Redirect from=’’ />, 如果没有满足条件(存在参数 path, from), 那么子组件将总是被匹配到. 所以这里的 <HomeLayout /> 将一直被匹配到, 而放在他后面的 <Login /> 不会被匹配到.

感谢提出问题的小伙伴与解答问题的小伙伴，让我学习到了更多，远程感谢！
（。＾▽＾）

小总结：
无 标签，则其中的在路径相同的情况下全都会匹配
有 标签，则其中的在路径相同的情况下，只匹配第一个，这个可以避免重复匹配；