umijs介绍及基本用法、配置式路由、约定式路由、路由传参等

umiJS

Umi 是蚂蚁金服的底层前端框架 中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备。同时有强大的插件扩展各种功能。

什么时候不用 umi

需要支持 IE 8 或更低版本的浏览器
需要支持 React 16.8.0 以下的 React
需要跑在 Node 10 以下的环境中
有很强的 webpack 自定义需求和主观意愿
需要选择不同的路由方案

使用

确保电脑上有nodejs 10.13 或以上

umi下载安装

npm install -g umi 全局安装
查看版本 umi -v
安装项目 npm或yarn create @umijs/umi-app
安装依赖 cnpm install 或 yarn
启动项目 npm 或 yarn start
运行 http://localhost:8000

HTML模板

修改默认模板
新建 src/pages/document.ejs（文件必须是这个明治），umi 约定如果这个文件存在，会作为默认模板
作用:如果要引用第三方js/css文件 可以直接在HTML模板中进行配置。有很多第三方的插件都没有react版本的 所以采用import的方式是没有办法进行引用的 也就只能采取上面的方式进行引用

尝试引用第三方jquery

jquery CDN:https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

在页面直接打印，可以发现已经引进来了，可以之直接在页面使用

页面创建

umi g命令创建页面或者组件
在项目根路径下执行
umi g page xxx（要创建页面名）或umi g page xxx/xxx
umi g page xxx --typescript --less 创建ts页面与less
umi g page 新建的文件名/—layout --typescript --less 创建ts页面与less

配置路由

一、配置式路由

1、在项目跟目录下找到".umirc.tc"在集中配置配置式路由

重定向：redirect
精准匹配：exact
当前页面标题：title

2、在对应的一级路由页面配置路由出口

二、约定式路由

1、删除项目下".umirc.ts"或者将这个文件重新换个名字也行，只要不叫现在这个名字就行。
_layout.tsx为一级路由页面，二级路由不用改变正常命名就行
按照以图中pages文件夹下的格式配置约定式路由，

约定式路由传参

不清楚useEffect可以看一下Hooks，这里简单的提一下
useEffect：函数组件中没有生命周期，在函数组件中可以用useEffect来代替，可以将useEffect看作react生命周期中的componentDidMount、componentDidUpdate、componentWillUnmount这三个函数的组合。

在浏览器输入：http://localhost:8000/shop/随便传递的参数
可以看到下面的截图，控制台打印出来了传递过来的参数

声明式编程式跳转

编程式跳转

语法：history.push()
注：类组件也需要引入history