react页面传值刷新后值消失如何解决
今天小编给大家分享一下react页面传值刷新后值消失如何解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
我们提供的服务有:做网站、成都网站制作、微信公众号开发、网站优化、网站认证、梓潼ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的梓潼网站制作公司
react页面传值刷新后值消失的解决办法:1、刷新页面,查看state里面的数据是否会清空;2、通过“const name = location.query.name;const id = location.query.id;”方法在跳转链接中增加参数,即可在实现传参的同时刷新页面后数据不会丢失。
解决react路由跳转传参刷新页面后参数丢失问题
import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push({
pathname: '/details',
state: {
name: name,
id: id,
},
});
在history中使用state确实可以传参数,在进入页面时可以正常显示,但是在刷新页面后state里面的数据会清空,页面就无法正常显示。
import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push({
pathname: '/details',
query: {
name: name,
id: id,
},
});
使用query是在跳转链接中增加参数,可以在实现传参的同时刷新页面后数据不会丢失,但是如果传的参数过多链接会很长。
import { useLocation } from 'react-router-dom';
const location = useLocation();
const name = location.query.name;
const id = location.query.id;
// 获取state参数的写法
const name = location.state.name;
const id = location.state.id;
这是在跳转页面获取参数的方式
(亲测有效,但是会有类型报错)
以上就是“react页面传值刷新后值消失如何解决”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。
当前名称:react页面传值刷新后值消失如何解决
文章起源:http://pwwzsj.com/article/peiisg.html