react-router中,<switch>标签存在意义说明

在学习中遇到这个问题,怎么翻译都没明白(果然看英文水平还不够啊),终于搞明白,记录下面,如果存在漏洞,望指正!

  • 有<switch>标签
            <BrowserRouter>
                <div>
                    <div>
                        <ul>
                            <li>
                                <Link to="/Guide/ContactUs">ContactUs</Link>
                            </li>
                        </ul>
                    </div>
                    <Switch>
                        <Route path="/Guide/ContactUs" component={ ContactUs } ></Route>
                        <Route path="/Guide/ContactUs" component={ ContactUs } ></Route>
                    </Switch>
                </div>
            </BrowserRouter>

结果为:

解释:

有<Switch>标签,则其中的<Route>在路径相同的情况下,只匹配第一个,这个可以避免重复匹配;

  • 无<switch>标签
            <BrowserRouter>
                <div>
                    <div>
                        <ul>
                            <li>
                                <Link to="/Guide/ContactUs">ContactUs</Link>
                            </li>
                        </ul>
                    </div>
                        <Route path="/Guide/ContactUs" component={ ContactUs } ></Route>
                        <Route path="/Guide/ContactUs" component={ ContactUs } ></Route>
                </div>
            </BrowserRouter>

结果为:


解释:

无<Switch>标签,则其中的<Route>在路径相同的情况下全都会匹配。更严重的是,还会匹配上级路径的,如下面例子:

            <BrowserRouter>
                <div>
                    <div>
                        <ul>
                            <li>
                                <Link to="/Guide/AboutUs">AboutUs</Link>
                            </li>
                        </ul>
                    </div>
                        <Route path="/Guide/ContactUs" component={ ContactUs } ></Route>
                        <Route path="/Guide/ContactUs" component={ ContactUs } ></Route>
                        <Route path="/Guide" component={ AboutUs } ></Route>
                </div>
            </BrowserRouter>

结果为:


结论:为了更好地匹配规则,轻易不要舍弃<Switch>。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,080评论 19 139
  • React-Router v4 1. 设计理念1.1. 动态路由1.2. 嵌套路由1.3. 响应式路由 2. 快速...
    wlszouc阅读 8,620评论 0 14
  • <BrowserRouter> 使用 HTML5 提供的 history API (pushState, repl...
    强子_30fd阅读 87,724评论 0 59
  • 大家天天说情商情商,情商在恋爱中到底是一种什么样的存在和体现呢?我今天就来举举例子对比对比。 1 女:如果我们见面...
    旭哥恋爱指导阅读 366评论 0 0
  • 《神算网红[古穿今]》作者:云舞轻 文案: *古穿今*玄学大师*苏爽* 某日,微博上某玄学大v发了一张女性自拍,吃...
    zhaozhanzhan阅读 1,378评论 0 0