React 如何向url中添加参数

更新时间：2022年08月03日 14:46:28 作者：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 );
		}

测试结果

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

您可能感兴趣的文章:

React tsx生成随机验证码
这篇文章主要为大家详细介绍了React tsx生成随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题，是小编给大家总结的一些react知识点，本文通过一个项目需求实例代码详解给大家介绍的非常详细，需要的朋友可以参考下
2021-06-06
React Render Props共享代码技术
render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的技术。简单来说，给一个组件传入一个prop，这个props是一个函数，函数的作用是用来告诉这个组件需要渲染什么内容，那么这个prop就成为render prop
2023-01-01
一文搞懂redux在react中的初步用法
Redux是JavaScript状态容器，提供可预测化的状态管理，今天通过本文给大家分享redux在react中使用及配置redux到react项目中的方法，感兴趣的朋友跟随小编一起看看吧
2021-06-06
探讨JWT身份校验与React-router无缝集成
这篇文章主要为大家介绍了JWT身份校验与React-router无缝集成的探讨解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
React-Hooks之useImperativeHandler使用介绍
这篇文章主要为大家介绍了React-Hooks之useImperativeHandler使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
React中如何设置多个className
这篇文章主要介绍了React中如何设置多个className问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
React Native之ListView实现九宫格效果的示例
本篇文章主要介绍了React Native之ListView实现九宫格效果的示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
React虚拟列表的实现代码
最近看了vueuse的useVirtualList的实现方式,发现虚拟滚动效果不错,就尝试着同样的写法改成react版本,虚拟列表主要包含三部分组成,offset,viewcapacity,overscan,本文就给大家介绍一下React虚拟列表的实现,需要的朋友可以参考下
2023-08-08
JS中使用react-tooltip插件实现鼠标悬浮显示框
前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结，感兴趣的朋友跟随小编一起看看吧
2019-05-05