快捷導(dǎo)航

react路由跳轉(zhuǎn)傳參刷新頁面后參數(shù)丟失的解決

更新時間：2023年06月07日 09:34:14 作者：司寧

這篇文章主要介紹了react路由跳轉(zhuǎn)傳參刷新頁面后參數(shù)丟失的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

react路由跳轉(zhuǎn)傳參刷新頁面后參數(shù)丟失

import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push({
? ? ? pathname: '/details',
? ? ? state: {
? ? ? ? name: name,
? ? ? ? id: id,
? ? ? },
});

在history中使用state確實可以傳參數(shù)，在進(jìn)入頁面時可以正常顯示，但是在刷新頁面后state里面的數(shù)據(jù)會清空，頁面就無法正常顯示。

import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push({
? ? ? pathname: '/details',
? ? ? query: {
? ? ? ? name: name,
? ? ? ? id: id,
? ? ? },
});

使用query是在跳轉(zhuǎn)鏈接中增加參數(shù)，可以在實現(xiàn)傳參的同時刷新頁面后數(shù)據(jù)不會丟失，但是如果傳的參數(shù)過多鏈接會很長。

import { useLocation } from 'react-router-dom';
const location = useLocation();
const name = location.query.name;
const id = location.query.id;
// 獲取state參數(shù)的寫法
const name = location.state.name;
const id = location.state.id;

這是在跳轉(zhuǎn)頁面獲取參數(shù)的方式

（親測有效，但是會有類型報錯）

react路由組件選擇與頁面刷新問題

總結(jié)最近 React 開發(fā)遇到的幾個問題及解決過程。

state 跳轉(zhuǎn)數(shù)據(jù)丟失問題

通過 state 傳遞數(shù)據(jù)的方式進(jìn)行跳轉(zhuǎn)時，如果 F5 刷新頁面，會丟失參數(shù)導(dǎo)致頁面異常。

解決辦法之一可以用緩存：

// 如果是刷新頁面，則沒有 state 屬性，從緩存中獲取
if(this.props.location.state == undefined) {
?? ?this.props.location.state = JSON.parse(sessionStorage.getItem('data'));
}
if(this.props.location.state != undefined) {
?? ?sessionStorage.setItem('data',JSON.stringify(this.props.location.state));
} else {
?? ?// 緩存和path 都沒有參數(shù)，則設(shè)置默認(rèn)屬性，保證頁面不報錯
?? ?this.props.location.state = {
?? ? ?// TODO 默認(rèn)的參數(shù)配置，保證頁面不報錯
?? ?};
}

將請求參數(shù)轉(zhuǎn)換為 JSON 字符串緩存到本地，網(wǎng)上還有一種方式是用 Qs 轉(zhuǎn)換，測試發(fā)現(xiàn)它有一個問題，就是數(shù)值類型的的值被序列化為字符串了，導(dǎo)致數(shù)據(jù)類型與之前不一致。

如果清空了緩存后，再執(zhí)行刷新操作，那么 else 分支中配置的默認(rèn)參數(shù)會生效。