一、Umi简介
- 1.什么是Umi?
- Umi 是蚂蚁金服的底层前端框架(经蚂蚁内部 3000+ 项目验证)
- Umi 是以'路由'为基础的企业级React框架(同时支持配置式路由和约定式路由)
- Umi 是一个'可插拔'的企业级React框架(内部功能完全使用插件化完成)
- 所以 Umi 是一个蚂蚁金服底层的, 以'路由'为基础的, 内部功能完全使用插件化完成的 React 框架
- 2.如何使用Umi
- mkdir demo
- cd demo
- npm init -y #初始化
- npm install umi #安装umi
- npx umi g page index #创建index页面
- npx umi dev #启动项目
二、约定式路由
- 约定式路由也叫文件路由，就是不需要手写配置路由，可以通过目录和文件及其命名
- 自动分析出路由配置
- 在Umi中pages目录下面的react组件文件名称，即是路由名称
- .umi 是项目启动之后，自动生成的
三、配置式路由（手动路由）
- 在项目根目录下，新建 .umirc.js 文件
- 注意：以下配置只是为了说明，手动路由会覆盖掉约定式路由，一般并不会这样配置
-
export default { routes: [ { exact: true, path: '/', component: 'home' }, { exact: true, path: '/home', component: 'about' }, { exact: true, path: '/about', component: 'index' }, ], } - 如果通过.umirc.js手动的配置路由, 那么默认的约定式路由就会失效, 那么最终的路由效果就是我们配置效果
- 官网地址：配置
四、全局布局文件
- 在项目根目录下，新建 layoutes 目录
- 只要在layoutes目录下新建的组件, 这个组件就会自动成为pages目录下的组件的父组件
layoutes/index.js
import React from 'react';
import Style from './index.css';
export default (props)=>{
return (
<>
<div className={Style.header}>头部</div>
{/* props.children：调用pages目录下的所有组件 */}
<div className={Style.main}>{props.children}</div>
<div className={Style.footer}>底部</div>
</>
)
}layoutes/index.css
.header{
width: 100%;
height: 40px;
background: red;
}
.main{
width: 100%;
height: auto;
padding: 50px;
background: skyblue;
}
.footer{
width: 100%;
height: 80px;
background: green;
}.umirc.js
export default {
routes: [
{
exact: true,
path: '/',
component: 'index'
},
{
exact: true,
path: '/home',
component: 'home'
},
{
exact: true,
path: '/about',
component: 'about'
},
],
}注意：需要删除之前，手动创建的路由
五、路由跳转
官网地址：页面跳转
- Link
- history.push()
layoutes/index.js
import React from 'react';
import Style from './index.css';
import { Link, history } from 'umi';
export default (props)=>{
return(
<>
<div className = {Style.header}>
{/* 方式1（声明式）：Link 实现页面跳转 */}
{/* <Link to="/">index</Link>
<Link to="/home">home</Link>
<Link to="/about">about</Link> */}
{/* 方式2（命令式）：history */}
{/* 1.可以先导入 history，再调用history.push()方法 */}
{/* <button onClick={()=>{history.push('/home')}}>跳转到home</button> */}
{/* 2.直接使用 props.history.push() */}
<button onClick={()=>{props.history.push('/')}}>跳转到index</button>
<button onClick={()=>{props.history.push('/home')}}>跳转到home</button>
<button onClick={()=>{props.history.push('/about')}}>跳转到about</button>
</div>
{/* props.children：调用pages目录下的所有组件 */}
<div className = {Style.main}>{props.children}</div>
<div className = {Style.footer}>bottom</div>
</>
)
}
六、路由参数
- npx umi g page user
page/user.js
import React from 'react';
import styles from './user.css';
import {Link} from 'umi';
export default function Page() {
return (
<div>
<h1 className={styles.title}>Page user</h1>
{/* 1和2为路由参数 */}
<Link to={'/detail/1'}>张三</Link>
<Link to={'/detail/2'}>李四</Link>
</div>
);
}pages/detail/[id].js
import React from 'react';
export default (props)=>{
// console.log(props.match.params);
return (
// 获取路由参数
<div>{props.match.params.id}</div>
)
}.umirc.js
export default {
routes: [
{
exact: true,
path: '/',
component: '@/pages/index'
},
{
exact: true,
path: '/home',
component: '@/pages/home'
},
{
exact: true,
path: '/about',
component: '@/pages/about'
},
{
exact: true,
path: '/detail/:id',
component: '@/pages/detail/[id]'
},
],
}
多个参数
page/user.js
import React from 'react';
import styles from './user.css';
import {Link} from 'umi';
export default function Page() {
return (
<div>
<h1 className={styles.title}>Page user</h1>
<Link to={"/detail/1"}>张三</Link>
<Link to={"/detail/2"}>李四</Link>
<Link to={"/info/3/lnj"}>多个参数</Link>
</div>
);
}pages/info/[id]/[name].js
import React from 'react';
export default (props)=>{
// console.log(props.match.params);
// console.log(props.match.params.id);
// console.log(props.match.params.name);
return (
<div>
<p>id = {props.match.params.id}</p>
<p>name = {props.match.params.name}</p>
</div>
)
}.umirc.js
export default {
routes: [
{
exact: true,
path: '/',
component: '@/pages/index'
},
{
exact: true,
path: '/home',
component: '@/pages/home'
},
{
exact: true,
path: '/about',
component: '@/pages/about'
},
{
exact: true,
path: '/detail/:id',
component: '@/pages/detail/[id]'
},
{
exact: true,
path: '/info/:id/:name',
component: '@/pages/info/[id]/[name]'
},
],
}
可选参数
page/user.js
import React from 'react';
import styles from './user.css';
import {Link} from 'umi';
export default function Page() {
return (
<div>
<h1 className={styles.title}>Page user</h1>
<Link to={"/detail/1"}>张三</Link>
<Link to={"/detail/2"}>李四</Link>
<Link to={"/info/3/lnj"}>多个参数</Link>
<Link to={"/info/3"}>可选参数</Link>
</div>
);
}.umirc.js
{
exact: true,
path: '/info/:id/:name',
component: '@/pages/info/[id$]/[name]'
},
由于只传了一个参数，那么必然会赋值给必传name（因为id为可选参数）
