一、UmiJS的路由

在Umi中，应用都是单页面应用，页面地址的跳转都是在浏览器端完成的，不会重新再去请求服务器而获取html，html只在应用初始化的时候加载一次，所有页面由不同的组件构成，页面的切换其实就是不同组件的切换，你只需要在配置中把不同的路由路径和对应的组件关联上。

1. 配置路由

在配置文件中（umirc.ts）通过routes进行配置，格式为路由信息的数组。

export default defineConfig({routes: [{ path: '/', component: '@/pages/index', }, // @ 代表src目录{ path: '/user', component: '@/pages/user',}  ],
});

path

type：string

配置可以被 path-to-regexp@^1.7.0 理解的路径通配符。

component

type：string

配置location和path匹配后用于渲染React组件的路径，可以是绝对路径，也可以是相对路径，会从src/pages开始找起；

如果指向src的目录，可以用@，也可以用../，比如component：'@/layouts/basic'，或者component:'../layouts/basic'，推荐使用@。

routes配置子路由（嵌套路由）

配置子路由，通常在需要为多个路径增加layout组件时使用。

export default {routes: [{ path: '/', component: '@/pages/index', }, // @ 代表src{path: '/user',component: '@/layouts/index',routes: [{ path: '/user/one', component: '@/pages/index' },{ path: '/user/two', component: '@/pages/user' }],}, ],
}

然后在 src/layouts/index 中通过 props.children 渲染子路由

export default function index(props: any) {return (<div><div><h2>Header</h2>{ props.children }<h2>Fouter</h2></div></div>)
}

redirect页面重定向

type：string

配置路由跳转

export default {{ path: '/list', redirect: '/user/one' },  //当页面访问未创建的页面时，重定向到指定页面
}

wrappers 路由拦截器

type：string[ ]

主要用于路由级别的权限校验，相当于中间件的作用

export default {routes: [{ path: '/user', component: 'user',wrappers: ['@/wrappers/auth',//当用户访问/user路径时，不会直接访问，而是先加载wrappers中的路由，然后再加载/user页面],},{ path: '/login', component: 'login' },]
}

title页面标题

type：string

export default {routes: [{ path: '/', component: '@/pages/index', title: '首页' }, ]
}

路由组件传参

路由组件可通过 props 传递参数，

1、传递路由相关参数，可以直接在props中拿到这些参数

export default function(props:any) {console.log(props);return <div>Home Page</div>;
}

2、传递用户信息相关参数，可以通过在路由中添加相关参数（如果是可选参数可以加一个“？”）

export default defineConfig({routes: [{ path: '/user/:id', component: '@/pages/user',}  { path: '/login/:id?', component: '@/pages/user',}  ],
});

2.约定式路由

这是Umijs给我们提供的一种便捷式路由状态管理模式，他省略了传统的配置式路由的代码编写，直接通过文件夹的名称以及文件状态来确定路由状态。

约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。

但是这种路由形式并不常用，所以可以了解一下即可。

https://v3.umijs.org/zh-CN/docs/convention-routing

二、UmiJS的页面跳转

在UmiJS中页面跳转方式有两种：声明式和命令式（编程式）

1.声明式

通过Link使用，通常作为React组件使用

import { Link,NavLink } from 'umi';export default () => (<Link to="/list">Go to list page</Link><NavLink to="/user">有class的Link</NavLink> //给Link标签加上"active"类名,表示被当前被点击的链接
);

这里主要使用Link标签进行页面跳转，<Link></Link>在页面中相当于<a>标签。在使用的时候分两步：

①引入Link标签

import { Link } from 'umi'

②使用Link标签

<Link to="/user/one">跳转到 用户 页面</Link>

2.命令式

通过 history 使用，通常在事件处理中被调用。

import { history } from 'umi';function goToListPage() {history.push('/list');
}

也可以直接从组件的属性中取得 history

export default (props) => (<Button onClick={()=>props.history.push('/list');}>Go to list page</Button>
);