react頁面傳值刷新後值消失怎麼辦

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中文網其他相關文章！