代码改变世界

react项目中,如何做到从A页面跳转到B页面将参数放入url中

2023-08-23  本文已影响0人  燕自浩

前言:一些很简单的页面例如从列表页面进入详情页面或者编辑页面会将id放入到url中,然后在对应的页面url中获取id,如果参数过多就会使url变得很长而已很模糊,另外用户还可以手动对参数进行修改,这样极其不安全,有没有什么方法让用户看不到参数,答案肯定是有的,接下来我们就探讨一下。

一、传递参数
  1. 引入useHistory
import { useHistory } from 'react-router-dom';
  1. 获取实例history
const history = useHistory()
  1. 页面跳转时
 url是要跳转的目标页面地址
 parameter是要在B页面使用的参数一般是一个Object
 history.push(url, parameter);
二、接收参数
  1. 引入useLocation
import { useLocation } from 'react-router-dom';
  1. 获取实例location
const location = useLocation()
  1. 使用参数
 location.state[参数名]

至此本篇文章就已经介绍完了,如果错误欢迎大家指正。

上一篇下一篇

猜你喜欢

热点阅读