React 如何向url中添加參數

Posted on by

React 向url中添加參數

用@withRouter修飾組件，把不是通過路由切換過來的組件中，將react-router 的 history、location、match 三個對象傳入props對象上

使用queryString去序列化需要添加的參數：

queryString.stringify({
    name:liff,
    id:1111
})
// return name=liff&id=1111

在props中獲取history，並且把序列化的後的參數push進去

import queryString from "query-string";
import {withRouter} from "react-router-dom";
history.push({
    queryString.stringify({
        name:liff,
        id:1111
    })
})

React 獲取url後面參數的值

由於頁面跳轉需要取攜帶的token訪問數據。

寫一個公共方法

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 '寫你建立公共方法的地址';
		//  結果測試
		constructor(peops){
			super(peops);
			const token = getUrlToken ('token',peops.location.search);
			console.log(token );
		}

測試結果

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：