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