react umi实战
Posted lin-fighting
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react umi实战相关的知识，希望对你有一定的参考价值。
umi
- umiJs是一个类Next.JS的react开发框架
- 它基于一个约定，即pages目录下的文件即路由，而文件则导出react组件。
- 然后打通从源码到产物的每个阶段，并配以完善的插件体系，让我们能把umi的产物部署到各个场景里面
初始化项目
npm i umi -g
umi g page index 
dev也是基于webpack-dev-server启动的。
约定式路由。
跳转
全局layout
约定src/layouts/index.js为全局组件，返回一个React组件，通过props.children渲染子组件。
有点类似react-route v6的OutLat，或者vue的router-view
嵌套路由
umi约定目录下有_layout.js使生成嵌套路由，
像这种有二级路由的以文件夹为主，
user组件会以_layout为主渲染，而他下面的子路由则渲染子props.children里面。
这种方式就是约定式路由+声明式路由,umi也有配置式路由。
动态路由
约定以[]包裹的文件或者文件夹为动态路由
这种动态路由也可以被渲染。
权限路由,路由守卫
通过指定高阶组件的wrappers属性达成效果。
wrappers路面放着路劲。
每次点击Profile就跳不过去了。
动态注册路由
以src下的app.js为约定。
注意这个Foo不在pages里面。
动态注册
mock数据
约定/mock下所有的的文件为mock文件
以上是关于react umi实战的主要内容，如果未能解决你的问题，请参考以下文章