快捷導航

React獲取url后面參數(shù)的值示例代碼

更新時間：2022年12月07日 11:29:08 作者：SeveCc

這篇文章主要介紹了React獲取url后面參數(shù)的值示例代碼,代碼簡單易懂，文末給大家補充介紹了react獲取URL中參數(shù)方法，需要的朋友可以參考下

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é)果

擴展知識：

react獲取URL中參數(shù)

這個問題想必很多人都會遇到過，這里我說一下怎么獲取URL中的參數(shù)。

react 獲取URL原理:

在 react 組件的 componentDidMount 方法中打印一下 this.props，在瀏覽器控制臺中查看輸出如下：

其中頁面的 url 信息全都包含在 match 字段中，

以地址  localhost:3000/app/knowledgeManagement/modify/STY20171011124209535/3/1507701970070/0/?s=1&f=7  為例

其中各個參數(shù)定義對應(yīng)如下：

localhost:3000/app/knowledgeManagement/modify/:studyNo/:stepId/:randomNum/:isDefault/?s=&f=

首先打印 this.props.match ：

可以看到 this.props.match 中包含的 url 信息還是非常豐富的，其中

history： 包含了組件可以使用的各種路由系統(tǒng)的方法，常用的有 push 和 replace，兩者都是跳轉(zhuǎn)頁面，但是 replace 不會引起頁面的刷新，僅僅是改變 url。

location： 相當于URL 的對象形式表示，通過 search 字段可以獲取到 url 中的 query 信息。（這里 state 的含義與 HTML5 history.pushState API 中的 state 對象一樣。每個 URL 都會對應(yīng)一個 state 對象，你可以在對象里存儲數(shù)據(jù)，但這個數(shù)據(jù)卻不會出現(xiàn)在 URL 中。實際上，數(shù)據(jù)被存在了 sessionStorage 中）（參考：深入理解 react-router 路由系統(tǒng)）

match： 包含了具體的 url 信息，在 params 字段中可以獲取到各個路由參數(shù)的值。

通過以上分析，獲取 url 中的指定參數(shù)就十分簡單了，下面是幾個例子：

// localhost:3000/app/knowledgeManagement/modify/STY20171011124209535/3/1507701970070/0/?s=1&f=7
// localhost:3000/app/knowledgeManagement/modify/:studyNo/:stepId/:randomNum/:isDefault/?s=1&f=7

// 獲取 studyNo
this.props.match.match.params.studyNo // STY20171011124209535

// 獲取 stepId
this.props.match.match.params.stepId // 3

// 獲取 success
const query = this.props.match.location.search // '?s=1&f=7'
const arr = query.split('&') // ['?s=', 'f=7']
const successCount = arr[0].substr(3) // '1'
const failedCount = arr[1].substr(2) // '7'