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