React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React向url中添加参数

React 如何向url中添加参数

作者:Jane_96

这篇文章主要介绍了React 如何向url中添加参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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 );
		}

测试结果

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文