其他分享
首页 > 其他分享> > react umi实战

react umi实战

作者:互联网

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文件在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

标签:实战,layout,约定,react,组件,umi,路由
来源: https://blog.csdn.net/lin_fightin/article/details/121197169