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

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í)刷新頁(yè)面后數(shù)據(jù)不會(huì)丟失，但是如果傳的參數(shù)過(guò)多鏈接會(huì)很長(zhǎng)。

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

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

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

react路由組件選擇與頁(yè)面刷新問(wèn)題

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

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

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

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

// 如果是刷新頁(yè)面，則沒(méi)有 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 都沒(méi)有參數(shù)，則設(shè)置默認(rèn)屬性，保證頁(yè)面不報(bào)錯(cuò)
?? ?this.props.location.state = {
?? ? ?// TODO 默認(rèn)的參數(shù)配置，保證頁(yè)面不報(bào)錯(cuò)
?? ?};
}

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

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

search 方式

筆記簡(jiǎn)單的跳轉(zhuǎn)方式是用 search 方式，將參數(shù)序列化。

用 Qs 序列化數(shù)據(jù)到 search 后瀏覽器地址欄會(huì)變得特別長(zhǎng)，感覺(jué)不是很友好。

antd Table 的分頁(yè)配置

antd 的 Table 組件，它的pagination 配置中，決定當(dāng)前頁(yè)碼的參數(shù)名叫 current，在一些跳轉(zhuǎn)返回的需求中，可能返回列表的頁(yè)碼不是初始 1，此時(shí)需要注意參數(shù)名稱(chēng)。

這個(gè)參數(shù)名稱(chēng)容易與后臺(tái)提交時(shí)的分頁(yè)參數(shù)弄混，所以必須牢記。

BrowserRouter 刷新后 404 問(wèn)題

如果 React 項(xiàng)目使用 BrowserRouter 的路由，存在一個(gè)問(wèn)題，F(xiàn)5 刷新頁(yè)面的時(shí)候，會(huì)出現(xiàn) 404 空白頁(yè)。

解決辦法是改成 HashRouter ，改完后重新打包后可能會(huì)因?yàn)闉g覽器緩存問(wèn)題，看不到效果，所以及時(shí)清理緩存。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。