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