React?如何向url中添加參數(shù)
更新時(shí)間：2022年08月03日 14:46:28 作者：Jane_96
這篇文章主要介紹了React?如何向url中添加參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
React 向url中添加參數(shù)
用@withRouter修飾組件，把不是通過(guò)路由切換過(guò)來(lái)的組件中，將react-router 的 history、location、match 三個(gè)對(duì)象傳入props對(duì)象上
使用queryString去序列化需要添加的參數(shù)：
queryString.stringify({
?? ?name:liff,
?? ?id:1111
})
// return name=liff&id=1111在props中獲取history，并且把序列化的后的參數(shù)push進(jìn)去
import queryString from "query-string";
import {withRouter} from "react-router-dom";
history.push({
?? ?queryString.stringify({
?? ??? ?name:liff,
?? ??? ?id:1111
?? ?})
})React 獲取url后面參數(shù)的值
由于頁(yè)面跳轉(zhuǎn)需要取攜帶的token訪問(wèn)數(shù)據(jù)。
寫一個(gè)公共方法
export function getUrlToken(name, str) {
const reg = new RegExp(`(^|&)${ name}=([^&]*)(&|$)`);
const r = str.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2]); return null;
}
在要獲取值得頁(yè)面進(jìn)行引入
import { getUrlToken } from '寫你建立公共方法的地址';
// 結(jié)果測(cè)試
constructor(peops){
super(peops);
const token = getUrlToken ('token',peops.location.search);
console.log(token );
}
測(cè)試結(jié)果
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React實(shí)現(xiàn)點(diǎn)擊刪除列表中對(duì)應(yīng)項(xiàng)
本文主要介紹了React 點(diǎn)擊刪除列表中對(duì)應(yīng)項(xiàng)的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要為大家介紹了基于antd的autocomplete的二次封裝查詢示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
react-native?父函數(shù)組件調(diào)用類子組件的方法(實(shí)例詳解)
這篇文章主要介紹了react-native?父函數(shù)組件調(diào)用類子組件的方法,通過(guò)詳細(xì)步驟介紹了React 函數(shù)式組件之父組件調(diào)用子組件的方法，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
使用React+ts實(shí)現(xiàn)無(wú)縫滾動(dòng)的走馬燈詳細(xì)過(guò)程
這篇文章主要給大家介紹了關(guān)于使用React+ts實(shí)現(xiàn)無(wú)縫滾動(dòng)的走馬燈詳細(xì)過(guò)程,文中給出了詳細(xì)的代碼示例以及圖文教程,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-08-08
React+echarts?(echarts-for-react)?實(shí)現(xiàn)中國(guó)地圖及省份切換功能
這篇文章主要介紹了React+echarts?(echarts-for-react)?畫(huà)中國(guó)地圖及省份切換,有足夠的地圖數(shù)據(jù)，可以點(diǎn)擊到街道，示例我只出到市級(jí)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)需要的朋友可以參考下2022-11-11
我們組的前端妹子在組內(nèi)分享時(shí)談到了 react 的鉤子，趁此機(jī)會(huì)我也對(duì)我所理解的內(nèi)容進(jìn)行下總結(jié)，方便更多的同學(xué)了解。在 React 的 v16.8.0 版本里添加了 hooks 的這種新的 API，我們非常有必要了解下他的使用方法，并能夠結(jié)合我們的業(yè)務(wù)編寫幾個(gè)自定義的 hooks。2021-05-05
這篇文章主要介紹了React三大屬性之Refs的使用詳解，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
在react中對(duì)less實(shí)現(xiàn)scoped配置方式
這篇文章主要介紹了在react中對(duì)less實(shí)現(xiàn)scoped配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
淺談React Native Flexbox布局(小結(jié))
這篇文章主要介紹了淺談React Native Flexbox布局(小結(jié)),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了React Mobx狀態(tài)管理工具的使用，MobX是一個(gè)狀態(tài)管理庫(kù)，它會(huì)自動(dòng)收集并追蹤依賴，開(kāi)發(fā)人員不需要手動(dòng)訂閱狀態(tài)，當(dāng)狀態(tài)變化之后MobX能夠精準(zhǔn)更新受影響的內(nèi)容，另外它不要求state是可JSON序列化的，也不要求state是immutable2023-02-02