react项目中,如何做到从A页面跳转到B页面将参数放入url中
2023-08-23 本文已影响0人
燕自浩
前言:一些很简单的页面例如从列表页面进入详情页面或者编辑页面会将id放入到url中,然后在对应的页面url中获取id,如果参数过多就会使url变得很长而已很模糊,另外用户还可以手动对参数进行修改,这样极其不安全,有没有什么方法让用户看不到参数,答案肯定是有的,接下来我们就探讨一下。
一、传递参数
- 引入
useHistory
import { useHistory } from 'react-router-dom';
- 获取实例
history
const history = useHistory()
- 页面跳转时
url是要跳转的目标页面地址
parameter是要在B页面使用的参数一般是一个Object
history.push(url, parameter);
二、接收参数
- 引入
useLocation
import { useLocation } from 'react-router-dom';
- 获取实例
location
const location = useLocation()
- 使用参数
location.state[参数名]
至此本篇文章就已经介绍完了,如果错误欢迎大家指正。