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 路由Link配置详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
React 中如何将CSS visibility 属性设置为 hidden
这篇文章主要介绍了React中如何将CSS visibility属性设置为 hidden,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
React中的getDefaultProps功能允许开发者为类组件定义默认属性,提高组件的灵活性和容错性,本文介绍了getDefaultProps的作用、语法以及最佳实践,并探讨了其他替代方案,如函数组件中的默认参数、高阶组件和ContextAPI等,理解这些概念有助于提升代码的可维护性和用户体验2024-09-09
这篇文章主要为大家详细介绍了React中如何处理表单的复杂验证逻辑,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-03-03
本篇文章主要介绍了React Native仿美团下拉菜单的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
在react面试中，面试官经常会问我们一些关于react的生命周期问题，今天特此分享本文给大家详细介绍下，感兴趣的朋友跟随小编一起看看吧2021-08-08
react echarts tooltip 区域新加输入框编辑保存数据功能
这篇文章主要介绍了react echarts tooltip 区域新加输入框编辑保存数据功能,大概思路是用一个div包裹echarts, 然后在echarts的同级新建一个div用来用来模拟真实tooltip，通过鼠标移入移出事件控制真实tooltip的显示与隐藏，需要的朋友可以参考下2023-05-05
这篇文章主要为大家介绍了ahooks整体架构及React工具库的源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
react拖拽react-beautiful-dnd一维数组二维数组拖拽功能
二维数组可以拖拽,但是不可以编辑+拖拽,如果想要实现编辑+拖拽,还是需要转换成一维数组,本文给大家介绍react拖拽react-beautiful-dnd的相关知识,感兴趣的朋友跟随小编一起看看吧2024-03-03
React中传参方式有很多,通过路由传参的方式也是必不可少的一种,本文主要介绍了React路由传参的几种实现方法,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
最新评论