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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/shi851051279/article/details/83351312

有 标签

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

结果为：

结论：为了更好地匹配规则，轻易不要舍弃 。