在《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 的官方