react-router实战之Switch

crayon-shin-chan

于 2021-02-11 22:00:47 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： surprise react # react-router-dom 文章标签： react

本文链接：https://blog.csdn.net/qq_27868061/article/details/113792038

surprise 同时被 3 个专栏收录

932 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

react

50 篇文章

订阅专栏

react-router-dom

24 篇文章

订阅专栏

本文介绍了React-Router的Switch组件，它类似于编程语言中的Switch关键字，确保只渲染第一个匹配的路由。通过对比使用和不使用Switch的示例，展示了Switch如何避免多个匹配路由的重复渲染。同时，文章探讨了Switch的特殊情况，如包含非<Route>元素时的渲染行为，以及当子元素不是<Route>时的影响范围。总结指出，正确使用Switch能有效管理互斥的路由组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.简介

Switch与各种语言中的Switch关键字含义类似，代表只执行第一个匹配的含义。

渲染第一个与位置匹配的<Route>或<Redirect>元素

<Switch>独特之处在于它只绘制子元素中第一个匹配的路由元素。

如果没有<Switch>，直接使用一堆<Route>，则每个与当前路径匹配的<Route>都会被绘制

2.实例

使用<Switch>时

        <Switch>
            <Route path="/about">
                <About />
            </Route>
            <Route path="/users">
                <Use

了解本专栏