一、路由跳转
路由的跳转有两种方式
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)