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