Umi 小白紀實（三）—— 震驚！路由居然如此強大！

在《Umi 小白紀實（一）》中有提到過簡單的路由配置和使用，但這只是冰山一角

借用一句廣告詞，Umi 路由的能量，超乎你的想象

 

1、基本用法

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' }, ]

 

 

2、動態路由

假若有某一個表單頁，須要區分新增(add)和編輯(edit)兩種狀態，這時候就能夠採用動態路由

umi 里約定，帶 $ 前綴的目錄或文件爲動態路由

而後在對應的組件中，經過 props.match.params 來獲取路由中的動態參數

 

再來一個需求：假若有一個 tab 菜單頁，進入該頁面時能夠指定某個菜單，若是沒有指定則展現第一個菜單

這時候就能夠使用可選的動態路由，umi 里約定帶 $ 後綴的動態路由爲可選動態路由

而後一樣經過 props.match.params 來獲取動態參數

這樣訪問 /user/:id/list 和 /user/list 都能訪問到該頁面

 

 

3、嵌套路由

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

 

 

4、經過 yaml 註釋擴展路由

以上其實都是一些基本的路由功能，雖然以約定目錄的方式實現了這麼完善的路由功能仍是很使人讚歎，但還稱不上「震驚」二字

真正讓我佩服到五體投地的東西，從這裏開始...

 

約定式路由雖然能節省冗雜的路由配置，但也不如直接配置 routes 來的靈活

Umi 的解決方案是，經過 yaml 註釋來擴展約定式路由的功能

Umi 約定路由文件的首個註釋若是包含 yaml 格式的配置，則會被用於擴展路由

好比修改頁面的 title，能夠直接經過添加 yaml 註釋搞定

全部 routes 字段能夠配置的參數，均可以經過註釋來擴展

這個功能爲完善路由組件的功能提供了基礎，好比權限路由

若是項目須要校驗權限，好比用戶是否登陸，只需在須要校驗權限的組件頂部添加註釋

/** * Routes: * - ./src/routes/private.jsx */

這樣一來，當前組件就會做爲子組件嵌套在 private.jsx 中

而後在 private.jsx 中添加校驗權限的邏輯

 

 

5、基於路由的按需加載

約定式路由結合註釋以後，就會生成完整的路由配置，能夠在頁面組件上經過 props.route.routes 獲取到

再結合其它插件就能夠實現麪包屑、切換動效等，這些就功能不展開說了。

但 Umi 還在看不見的地方，利用路由作了不少優化，好比按需加載

// .umirc.js
export default { plugins: [ ['umi-plugin-react', { dynamicImport: true, }], ], };

對於開發人員來講，只須要添加以上配置就能開啓按需加載

開啓以後，假若有 1000 個頁面，調試時只要調其中的 5 個頁面，最終就會只編譯這 5 個頁面

而 Umi 是如何作到的呢？他們使用了臨時文件來佔位

在訪問 url 的時候，只會加載當前的組件，其它路由組件都用 Loading 組件佔位

雖然有些取巧，但簡單有效

 

路由還有一些正在完善的功能，好比 keep-alive、AntD+路由自動生成菜單，最新的進展能夠關注 Umi 的官方倉庫