今天小編給大家分享一下react頁面?zhèn)髦邓⑿潞笾迪绾谓鉀Q的相關(guān)知識點，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

我們提供的服務(wù)有：做網(wǎng)站、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、梓潼ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的梓潼網(wǎng)站制作公司

react頁面?zhèn)髦邓⑿潞笾迪У慕鉀Q辦法：1、刷新頁面，查看state里面的數(shù)據(jù)是否會清空；2、通過“const name = location.query.name;const id = location.query.id;”方法在跳轉(zhuǎn)鏈接中增加參數(shù)，即可在實現(xiàn)傳參的同時刷新頁面后數(shù)據(jù)不會丟失。

解決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頁面?zhèn)髦邓⑿潞笾迪绾谓鉀Q”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章標(biāo)題：react頁面?zhèn)髦邓⑿潞笾迪绾谓鉀Q
分享鏈接：http://www.chinadenli.net/article36/peiisg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、移動網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)