网站建设的缺陷,对比的网站建设,百度推广怎么才能效果好,wordpress搜索 s=在《Umi 小白纪实(一)》中有提到过简单的路由配置和使用#xff0c;但这只是冰山一角借用一句广告词#xff0c;Umi 路由的能量#xff0c;超乎你的想象一、基本用法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.jsexport default{plugins: [[umi-plugin-react, {dynamicImport:true,}],],};对于开发人员来说只需要添加以上配置就能开启按需加载开启之后假如有 1000 个页面调试时只要调其中的 5 个页面最终就会只编译这 5 个页面而 Umi 是如何做到的呢他们使用了临时文件来占位在访问 url 的时候只会加载当前的组件其它路由组件都用 Loading 组件占位虽然有些取巧但简单有效路由还有一些正在完善的功能比如 keep-alive、AntD路由自动生成菜单最新的进展可以关注 Umi 的官方仓库