首頁  >  文章  >  web前端  >  react頁面傳值刷新後值消失怎麼辦

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

藏色散人
藏色散人原創
2022-12-29 11:11:592341瀏覽

react頁面傳值刷新後值消失的解決方法:1、刷新頁面,查看state裡面的資料是否會清空;2、透過「const name = location.query.name;const id = location. query.id;」方法在跳轉連結中增加參數,即可在實現傳參的同時刷新頁面後資料不會遺失。

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

本教學操作環境: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn