react页面传值刷新后值消失的解决办法：1、刷新页面，查看state里面的数据是否会清空；2、通过“const name = location.query.name;const id = location.query.id;”方法在跳转链接中增加参数，即可在实现传参的同时刷新页面后数据不会丢失。
本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。
react页面传值刷新后值消失怎么办？
解决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页面传值刷新后值消失怎么办的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
337
