react页面传值刷新后值消失如何解决

今天小编给大家分享一下react页面传值刷新后值消失如何解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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页面传值刷新后值消失如何解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。