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)

你可能感兴趣的:(react.js,javascript,前端)