React Router 基礎元件一覽

在 React Router 中有三種類型的元件：路由器元件，路由比對元件，導航元件。這些元件都來自于 <code>react-router-dom</code>。

對于每一個 React Router 應用來說，都應該有一個路由器元件，它們會為應用建立一個專用的 <code>history</code> 對象。針對 Web 項目，<code>react-router-dom</code> 提供了 <code>&lt;BrowserRouter&gt;</code> 和 <code>&lt;HashRouter&gt;</code>。

React Router 提供了兩種路由比對元件：<code>&lt;Route&gt;</code> 和 <code>&lt;Switch&gt;</code>。

路由比對是通過比較 <code>&lt;Route&gt;</code> 元件的 <code>path</code> 屬性和目前位址的 pathname 實作的，如果比對則渲染目前路由元件的内容，如果不比對則渲染 null。注意：沒有提供 <code>path</code> 屬性的 <code>&lt;Route&gt;</code> 元件将總是比對。

<code>&lt;Switch&gt;</code> 元件用于給 <code>&lt;Route&gt;</code> 元件分組，可以将一組 <code>&lt;Route&gt;</code> 元件嵌套在 <code>&lt;Switch&gt;</code> 元件中。

那麼，<code>&lt;Switch&gt;</code> 元件僅是為了給 <code>&lt;Route&gt;</code> 元件分組而誕生的嗎？我們知道 <code>&lt;Route&gt;</code> 元件通過比較它的 <code>path</code> 屬性和目前位址來判斷是否渲染它的内容，是以就會存在多個 <code>&lt;Route&gt;</code> 比對成功且都渲染它們内容的情況。為了避免這樣的情況，<code>&lt;Switch&gt;</code> 元件就起了作用，它會疊代當中的 <code>&lt;Route&gt;</code> 元件，并選出第一個比對的 <code>&lt;Route&gt;</code> 來渲染。

React Router 提供了 <code>&lt;Link&gt;</code> 元件用于為應用提供連結，當渲染 <code>&lt;Link&gt;</code> 元件的時候，會在應用中渲染為 HTML 的 <code>&lt;a&gt;</code> 标簽。

另外還有一個特殊的 <code>&lt;Link&gt;</code> 元件就是 <code>&lt;NavLink&gt;</code>，如果目前的位址與它的屬性相比對，它就會使用 "active" 樣式。

任何時候如果您想要強制一個導航，就可以使用 <code>&lt;Redirect&gt;</code> 元件，當它被渲染的時候，就會導航到它的屬性。