Umi 小白纪实—— 震惊!路由竟然如此强大!

Posted wisewrong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Umi 小白纪实—— 震惊!路由竟然如此强大!相关的知识,希望对你有一定的参考价值。

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

以上是关于Umi 小白纪实—— 震惊!路由竟然如此强大!的主要内容,如果未能解决你的问题,请参考以下文章

震惊!Vue路由竟然是这样实现的!

Option键竟然如此强大,99.9%的Mac用户不知道的高效秘技

如此强大的开源ETL工具竟然被我发现了

震惊! 滑动验证码竟然能这样破解

React<umi+小笔记>

umi框架的使用