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進(jìn)去
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;
}
在要獲取值得頁面進(jìn)行引入
import { getUrlToken } from '寫你建立公共方法的地址';
// 結(jié)果測試
constructor(peops){
super(peops);
const token = getUrlToken ('token',peops.location.search);
console.log(token );
}
測試結(jié)果
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了react 路由Link配置詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
React?中如何將CSS?visibility?屬性設(shè)置為?hidden
這篇文章主要介紹了React中如何將CSS?visibility屬性設(shè)置為?hidden,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
React中g(shù)etDefaultProps的使用小結(jié)
React中的getDefaultProps功能允許開發(fā)者為類組件定義默認(rèn)屬性,提高組件的靈活性和容錯性,本文介紹了getDefaultProps的作用、語法以及最佳實踐,并探討了其他替代方案,如函數(shù)組件中的默認(rèn)參數(shù)、高階組件和ContextAPI等,理解這些概念有助于提升代碼的可維護(hù)性和用戶體驗2024-09-09
這篇文章主要為大家詳細(xì)介紹了React中如何處理表單的復(fù)雜驗證邏輯,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
React Native仿美團(tuán)下拉菜單的實例代碼
本篇文章主要介紹了React Native仿美團(tuán)下拉菜單的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
在react面試中，面試官經(jīng)常會問我們一些關(guān)于react的生命周期問題，今天特此分享本文給大家詳細(xì)介紹下，感興趣的朋友跟隨小編一起看看吧2021-08-08
react echarts tooltip 區(qū)域新加輸入框編輯保存數(shù)據(jù)功能
這篇文章主要介紹了react echarts tooltip 區(qū)域新加輸入框編輯保存數(shù)據(jù)功能,大概思路是用一個div包裹echarts, 然后在echarts的同級新建一個div用來用來模擬真實tooltip，通過鼠標(biāo)移入移出事件控制真實tooltip的顯示與隱藏，需要的朋友可以參考下2023-05-05
這篇文章主要為大家介紹了ahooks整體架構(gòu)及React工具庫的源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
react拖拽react-beautiful-dnd一維數(shù)組二維數(shù)組拖拽功能
二維數(shù)組可以拖拽,但是不可以編輯+拖拽,如果想要實現(xiàn)編輯+拖拽,還是需要轉(zhuǎn)換成一維數(shù)組,本文給大家介紹react拖拽react-beautiful-dnd的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-03-03
React中傳參方式有很多,通過路由傳參的方式也是必不可少的一種,本文主要介紹了React路由傳參的幾種實現(xiàn)方法,具有一定的參考價值,感興趣的可以了解一下2023-12-12