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 的官方仓库