有 標籤

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

結果為：

結論：為了更好地匹配規則，輕易不要捨棄 。