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