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ù)，在進入頁面時可以正常顯示，但是在刷新頁面后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ù)的方式進行跳轉(zhuǎn)時，如果 F5 刷新頁面，會丟失參數(shù)導致頁面異常。

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

// 如果是刷新頁面，則沒有 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ù)，則設置默認屬性，保證頁面不報錯
?? ?this.props.location.state = {
?? ? ?// TODO 默認的參數(shù)配置，保證頁面不報錯
?? ?};
}

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

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

search 方式

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

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

antd Table 的分頁配置

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

這個參數(shù)名稱容易與后臺提交時的分頁參數(shù)弄混，所以必須牢記。

BrowserRouter 刷新后 404 問題

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

解決辦法是改成 HashRouter ，改完后重新打包后可能會因為瀏覽器緩存問題，看不到效果，所以及時清理緩存。

總結(jié)

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

最新評論