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

最新推荐文章于 2024-04-29 09:09:54 发布

泥猴桃

最新推荐文章于 2024-04-29 09:09:54 发布

阅读量1.7k

点赞数 1

分类专栏： react 文章标签： Switch标签

本文链接：https://blog.csdn.net/shi851051279/article/details/83351312

版权

react 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

有标签

			<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>

结果为
在这里插入图片描述

解释：

有标签，则其中的在路径相同的情况下，只匹配第一个，这个可以避免重复匹配；

无标签

			<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>

结果为：
在这里插入图片描述
解释：
无标签，则其中的在路径相同的情况下全都会匹配。更严重的是，还会匹配上级路径的，如下面例子：

<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>

结果为：
在这里插入图片描述
结论：为了更好地匹配规则，轻易不要舍弃。