一、声明式
使用Link，通常作为React组件使用。
import { Link } from 'umi';
export default () => {
<Link to="/list">Go to list page</Link>
};
Link只用于单页应用的内部跳转，如果是外部地址跳转请使用<a>标签。
二、命令式
使用history，通常在事件处理中被调用。
import { history } from 'umi';
// 跳转到指定路由
history.push('/list');
// 带参数跳转到指定路由
history.push('/list?a=b');
history.push({
pathname: '/list',
query: {
a: 'b',
},
});
// 跳转到上一个路由
history.goBack();
以上是UmiJS 官方文档中关于路由的介绍。其中带参数跳转的两种写法都是将请求参数以GET方式发送，会在URL中显示。
场景：需要由页面一跳转到页面二，参数以POST方式传递，页面二用于新增或编辑。
在路由配置文件中添加两个页面的路由
...
{
name: 'pageone',
path: '/flow/audit-config/pageone',
component: './Flow/AuditConfig/PageOne',
meta: { icon: '', title: '页面一' },
},
{
name: 'pagetwo',
path: '/flow/audit-config/pagetwo',
component: './Flow/AuditConfig/PageTwo',
meta: { icon: '', title: '页面二' },
}
...
页面一
import { Link, history } from 'umi';
// 新增不需要传参，所以用 Link
<Link to="/flow/audit-config/pagetwo">
<Button type="primary">新增</Button>
</Link>
// 编辑需要传递 id 参数
<span onClick={() => edit(record)}>编辑</span>
const edit = record => {
// 编辑的接口
dispatch({...});
// 通过 state ，id 是以 POST 方式传递
history.push({
pathname: '/flow/audit-config/pagetwo',
state: { id: record.id }
});
}
存在的问题：使用state传递参数，页面二刷新会出现参数丢失的现象，导致编辑表单回显的数据被清空。
解决方法：还是使用query的方式传递。在页面二使用location接收参数。
页面一
import { Link, history } from 'umi';
// 新增不需要传参，所以用 Link
<Link to="/flow/audit-config/pagetwo">
<Button type="primary">新增</Button>
</Link>
// 编辑需要传递 id 参数
<span onClick={() => edit(record)}>编辑</span>
const edit = record => {
history.push({
pathname: '/flow/audit-config/pagetwo',
query: { id: record.id }
});
}
页面二
import { history, useLocation } from 'umi';
const location = useLocation();
const id = location.query.id;
在UmiJS的API文档中有Link传参的例子。
import { Link } from 'umi';
export default () => {
return (
<div>
/**
* 点击跳转到指定 /courses 路由，
* 附带 query { sort: 'name' }
* */
<Link to="/courses?sort=name">Courses</Link>
/**
* 点击跳转到指定 /list 路由，
* 附带 query: { sort: 'name' }
* 附带 hash: 'the-hash'
* 附带 state: { fromDashboard: true }
* */
<Link
to={{
pathname: "/list",
search: "?sort=name",
hash: "#the-hash",
state: { fromDashboard: true },
}}
>
List
</Link>
/**
* 点击跳转到指定 /profile 路由，
* 附带所有当前 location 上的参数
* */
<Link
to={location => {
return { ...location, pathname: "/profile" };
}}
/>
/**
* 点击跳转到指定 /courses 路由，
* 但会替换当前 history stack 中的记录
* */
<Link to="/courses" replace />
/**
* innerRef 允许你获取基础组件（这里应该就是 a 标签或者 null）
* */
<Link
to="/courses"
innerRef={node => {
// `node` refers to the mounted DOM element
// or null when unmounted
}}
/>
</div>
);
};