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

前言:一些很简单的页面例如从列表页面进入详情页面或者编辑页面会将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[参数名]

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容