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

2023-09-03 20:39| 来源: 网络整理| 查看: 265

一、路由跳转

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

组件（标签）跳转

JS 跳转

1、组件（标签）跳转

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

2、JS 跳转

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

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

import { history } from 'umi'; // 跳转到指定路由 history.push('/list'); history.replace('/list'); // 跳转到上一个路由 history.goBack(); 二、路由传参 1、动态路由

传递参数：

配置动态路由： { 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)

【本文地址】

今日新闻