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

---

一、路由跳转

路由的跳转有两种方式
1.组件跳转
2.js跳转

1、组件跳转

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

2、js跳转

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

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)