react umi实战

React 2022-10-08

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初探（二）之父子组件通信、封装公共组件

一、前言在组件方面react和Vue一样的，核心思想玩的就是组件...

rematch：当你受不了redux繁琐写法的时候，是时候了解一波rematch了

前言：前段时间学习完react后，刚好就接到公司一个react项目...

react初探（一）之JSX、状态（state）管理、条件渲染、事件处理

前言：最近收到组长通知我们项目组后面新开的项目准备统一技...

react 学习11高阶组件

react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如...

react 学习(四) 批量更新及合成事件

我们上一节了解了组件的更新机制，但是只是停留在表层上，例...

react 学习(二) 实现类和函数式组件

我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom...