umi
要求
ie8以下无效
react16.8以下无效
node10 以下无效
umi与cra的区别
cra 可以理解为是一个react的项目环境 不包含路由 redux等内容
umi可以理解为是基于react的一个二次框架 他里面聚集了更多有用的便捷的 功能比如路由功能
yarn
yarn facebook推出 同npm一样就是一个包管理工具
| npm | yarn | |
|---|---|---|
| 初始化 | npm init | yarn init |
| 安装依赖 | npm install | yarn install 或者 yarn |
| 新增依赖 | npm install --save xxxx | yarn add xxx |
| 全局安装 | npm install -g xxxx | yarn global add xxx |
| 删除依赖 | npm uninstall --save xxxx | yarn remove xxx |
安装 npm install -g yarn
切换yarn 镜像源 到淘宝 yarn config set registry https://registry.npm.taobao.org
umi安装
全局下载umi: yarn global add umi / npm install -g umi
查看版本： umi -v
cd 到指定文件夹下
安装项目 yarn create @umijs/umi-app / npm create @umijs/umi-app
安装依赖 npm install / yarn add
启动项目 npm start yarn start
新建页面
我们只需要在项目路径下使用
js的页面 umi g page 页面名即可创建
ts的页面 umi g page 页面名 --typescript --less
配置式路由
umi中已经默认帮助我们配置好路由了
1.来到.umirc文件中 通过配置routes进行路由设置
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
// 路由规则配置
routes: [
{ path: '/', component: '@/pages/index' },
{ path: '/home', component: '@/pages/home' },
],
fastRefresh: {},
});
title选项
配置路由的标题。
404页面
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
// 路由规则配置
routes: [
{ path: '/', component: '@/pages/index',exact: true,title:"你好" },
{ path: '/home', component: '@/pages/home',title:"你坏" },
// 404页面
{ path: '*', component: '@/pages/no',title:"404" },
],
fastRefresh: {},
});
重定向
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
// 路由规则配置
routes: [
// 重定向
{ exact: true, path: '/', redirect: '/index' },
{ path: '/index', component: '@/pages/index',exact: true,title:"你好" },
{ path: '/home', component: '@/pages/home',title:"你坏" },
// 404页面
{ path: '*', component: '@/pages/no',title:"404" },
],
fastRefresh: {},
});
二级路由
配置规则
import { defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
// 路由规则配置
routes: [
// 重定向
{ exact: true, path: '/', redirect: '/index' },
{ path: '/index', component: '@/pages/index',exact: true,title:"你好" },
{
path: '/home',
component: '@/pages/home',
title:"你坏",
// 二级路由
routes:[
{path: '/home/era', component: '@/pages/er/era'},
{path: '/home/erc', component: '@/pages/er/erc'}
]
},
// 404页面
{ path: '*', component: '@/pages/no',title:"404" },
],
fastRefresh: {},
});
千万不要忘了设置路由出口
this.props.children 谁的二级路由写在谁的组件页面中
约定式路由
配置式路由是我们需要写一个配置路由的文件是umirc这个文件中配置routes这个数组对象 才能完成路由的设置
约定式 就是不需要配置routes就可以生成路由 你不写路由配置他就是约定式路由
如果没有routes的这个配置项 那么umi就会自动进入到约定式路由模式 他会自动分析pages文件夹 自动创建出路由
约定式路由虽然我们不需要写路由规则了 但是在一些复杂的环境下 我们需要按照umi的语法要求来创建文件与文件夹 才可实现复杂的路由功能
路由传参/动态路由匹配
向路由传参等这种复杂功能我们就需要设置对应的语法
在pages文件夹下创建文件夹 就是页面的名字 文件夹下的文件需要使用[接收参数]的这种命名方式
接收的时候在页面中接收
import {useEffect} from "react"
let Xiaoming=(props)=>{
useEffect(()=>{
// 打印以下接收的路由参数
console.log(props.match.params.xiaoming);
})
return (
<div>
<h1></h1>
</div>
)
}
export default Xiaoming
发送
func=()=>{
history.push("/phone/我是小明")
}
路由导航
编程式
import React, { Component } from 'react'
// 1.引用
import { Link,history } from 'umi'
export default class topbar extends Component {
fun=()=>{
// 编程式导航
history.push("/")
}
funb=()=>{
history.push("/home")
}
render() {
return (
<div>
<Link to="/">index</Link>
<Link to="/home">home</Link>
<hr />
<button onClick={this.fun}>点我去index</button>
<button onClick={this.funb}>点我去home</button>
</div>
)
}
}
声明式
import React, { Component } from 'react'
// 1.引用
import { Link } from 'umi'
export default class topbar extends Component {
render() {
return (
<div>
<Link to="/">index</Link>
<Link to="/home">home</Link>
</div>
)
}
}