umi路由跳转和传参（基于React）

一、路由跳转

Umi 中路由跳转可以分为两种方式：

组件（标签）跳转

JS 跳转

1、组件（标签）跳转

Umi 中也可以通过 和 组件来实现跳转：

<Link to="路径"></Link>
<NavLink to="路径" activeClassName="class名"></NavLink>

2、JS 跳转

在 Umi 中也可以通过 props.history.push(‘路径’) 和 useHistory().push(‘路径’) 来实现跳转。

Umi 中还提供了另一种获取 history 的方式：

import { history } from 'umi';

// 跳转到指定路由
history.push('/list');
history.replace('/list');
// 跳转到上一个路由
history.goBack();

二、路由传参

1、动态路由

传递参数：

<Link to="/路径/参数"></Link>
配置动态路由：

{ path: '/路径/:变量名', component: '组件路径'}

接收参数：

import { useParams } from 'umi'
const params = useParams();

2、query 传参

传递参数：

history.push('/路径?参数名=参数值&参数名=参数值')

history.push({
    pathname: '/路径',
    query: {
        参数名: 参数值
    }
})

接收参数：

import { useLocation } from 'umi';
const location = useLocation();
console.log(location.query)