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頁面傳值刷新后值消失如何解決”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。