react-router 中 IndexRoute、IndexRedirect 的區別介紹
- 2020 年 1 月 4 日
- 筆記
本文內容引用了 react-router v3 的文檔介紹來舉例說明，內容並不重複，我們會以項目開發的角度來分析這兩個功能的實際作用，更有助於理解和使用這兩個功能。
Index Routes
通常情況下，我們會建立如下情況的路由：
<Router> <Route path="/" component={App}> <Route path="accounts" component={Accounts}/> <Route path="statements" component={Statements}/> </Route> </Router>其中 App 組件一般情況下是一個 layout，比如包含了 header、footer 或者其他內容，其下面的 route 會被嵌入到這個 App 中（它們將成為 App 的 children），但這樣配置路由有一個問題，就是我們訪問 http://localhost:3000/ 這個地址時，你會發現僅渲染了一個 App 的 layout 內容，Accounts 和 Statements 都沒有被渲染，這種情況下我們一般會設置一個默認頁，當訪問 / 這個路由時顯示這個默認頁。由此就需要用到 IndexRoute 功能，修改一下路由如下所示：
<Router> <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="accounts" component={Accounts}/> <Route path="statements" component={Statements}/> </Route> </Router>如此配置後，我們再次訪問 / 路由，你會發現頁面渲染了 Home 組件的內容。這就是 IndexRoute 的功能，指定一個路由的默認頁。
Index Redirects
上面這種情況比較常見，還有一種非常常見的方式就是當我們嘗試訪問 / 這個路由時，我們想讓其直接跳轉到 『/Accounts』，直接免去了默認頁 Home，這樣來的更加直接。由此我們就需要 IndexRedirect 功能。考慮如下路由：
<Router> <Route path="/" component={App}> <IndexRedirect to="/accounts"/> <Route path="accounts" component={Accounts}/> <Route path="statements" component={Statements}/> </Route> </Router>這樣設計路由後，我們再次訪問 / 時，系統默認會跳轉到 /accounts 路由。
總結
以上就是 IndexRoute 和 IndexRedirect 的功能介紹，讓我們來總結一下他們兩個的區別。
- IndexRoute 一般情況下用於設計一個默認頁且不改變 URL 地址，而 IndexRedirect 則是跳轉默認地址且地址會發生改變。
- IndexRoute 指定一個組件作為默認頁，而 IndexRedirect 指定一個路由地址作為跳轉地址。
