快捷導(dǎo)航

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

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

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

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í)可以傳參數(shù)，在進(jìn)入頁面時(shí)可以正常顯示，但是在刷新頁面后state里面的數(shù)據(jù)會(huì)清空，頁面就無法正常顯示。

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

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

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ù)的方式

（親測(cè)有效，但是會(huì)有類型報(bào)錯(cuò)）

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

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

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

通過 state 傳遞數(shù)據(jù)的方式進(jìn)行跳轉(zhuǎn)時(shí)，如果 F5 刷新頁面，會(huì)丟失參數(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)屬性，保證頁面不報(bào)錯(cuò)
?? ?this.props.location.state = {
?? ? ?// TODO 默認(rèn)的參數(shù)配置，保證頁面不報(bào)錯(cuò)
?? ?};
}

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

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