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>
)
}
}