在《Umi 小白紀實（一）》中有提到過簡單的路由配置和使用，但這隻是冰山一角 借用一句廣告詞，Umi 路由的能量，超乎你的想象 一、基本用法 Umi 的路由根結點是全局 layout src/layouts/index.js 路由會將相應的頁面組件映射到上面的 props.children 中 之前 ...
在《Umi 小白紀實（一）》中有提到過簡單的路由配置和使用，但這隻是冰山一角
借用一句廣告詞，Umi 路由的能量，超乎你的想象
一、基本用法
Umi 的路由根結點是全局 layout src/layouts/index.js
路由會將相應的頁面組件映射到上面的 props.children 中
之前的文章介紹過，Umi 的路由可以通過 .umirc.js 文件中的 routes 欄位配置
但配置 routes 欄位後，約定式路由不會生效。如果項目較重，就需要配置很多路由，所以我更傾向於使用約定式路由
Umi 可以基於 pages 目錄下的結構，自動生成路由配置，這就是約定式路由
比如上圖的目錄結構，最終會被 Umi 解析為
[
{ path: '/', component: './pages/index.jsx' },
{ path: '/users/', component: './pages/user/index.jsx' },
{ path: '/users/list', component: './pages/user/detail/index.jsx' },
]
二、動態路由
假如有某一個表單頁，需要區分新增(add)和編輯(edit)兩種狀態，這時候就可以採用動態路由
umi 里約定，帶 $ 首碼的目錄或文件為動態路由
然後在對應的組件中，通過 props.match.params 來獲取路由中的動態參數
再來一個需求：假如有一個 tab 菜單頁，進入該頁面時可以指定某個菜單，如果沒有指定則展示第一個菜單
這時候就可以使用可選的動態路由，umi 里約定帶 $ 尾碼的動態路由為可選動態路由
然後同樣通過 props.match.params 來獲取動態參數
這樣訪問 /user/:id/list 和 /user/list 都能訪問到該頁面
三、嵌套路由
umi 約定目錄下有 _layout.js 時會生成嵌套路由，以 _layout.js 為該路由的根結點
如上圖的結構，在訪問 /user/detail/count/ 和 /user/detail/info/ 的時候都會以 _layout.js 生成二級路由
但在切換子路由，當前的滾動條並不會變化，如果希望切換子組件之後回到頂部，可以在 _layout.js 的 componentDidUpdate 中添加相應的邏輯
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0);
}
}
PS: _layout.js 也可以是 _layout.jsx，上面的全局 layout 同理
四、通過 yaml 註釋擴展路由
以上其實都是一些基本的路由功能，雖然以約定目錄的方式實現了這麼完善的路由功能還是很令人贊嘆，但還稱不上“震驚”二字
真正讓我佩服到五體投地的東西，從這裡開始...
約定式路由雖然能節省冗雜的路由配置，但也不如直接配置 routes 來的靈活
Umi 的解決方案是，通過 yaml 註釋來擴展約定式路由的功能
Umi 約定路由文件的首個註釋如果包含 yaml 格式的配置，則會被用於擴展路由
比如修改頁面的 title，可以直接通過添加 yaml 註釋搞定
所有 routes 欄位可以配置的參數，都可以通過註釋來擴展
這個功能為完善路由組件的功能提供了基礎，比如許可權路由
如果項目需要校驗許可權，比如用戶是否登錄，只需在需要校驗許可權的組件頂部添加註釋
/**
* Routes:
* - ./src/routes/private.jsx
*/
這樣一來，當前組件就會作為子組件嵌套在 private.jsx 中
然後在 private.jsx 中添加校驗許可權的邏輯
五、基於路由的按需載入
約定式路由結合註釋之後，就會生成完整的路由配置，可以在頁面組件上通過 props.route.routes 獲取到
再結合其它插件就可以實現麵包屑、切換動效等，這些就功能不展開說了。
但 Umi 還在看不見的地方，利用路由做了很多優化，比如按需載入
// .umirc.js
export default {
plugins: [
['umi-plugin-react', {
dynamicImport: true,
}],
],
};
對於開發人員來說，只需要添加以上配置就能開啟按需載入
開啟之後，假如有 1000 個頁面，調試時只要調其中的 5 個頁面，最終就會只編譯這 5 個頁面
而 Umi 是如何做到的呢？他們使用了臨時文件來占位
在訪問 url 的時候，只會載入當前的組件，其它路由組件都用 Loading 組件占位
雖然有些取巧，但簡單有效
路由還有一些正在完善的功能，比如 keep-alive、AntD+路由自動生成菜單，最新的進展可以關註 Umi 的官方倉庫
