React获取url后面参数的值示例代码

 更新时间:2022年12月07日 11:29:08   作者:SeveCc  
这篇文章主要介绍了React获取url后面参数的值示例代码,代码简单易懂,文末给大家补充介绍了react获取URL中参数方法,需要的朋友可以参考下

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获取URL中参数

这个问题想必很多人都会遇到过,这里我说一下怎么获取URL中的参数。

react 获取URL原理:

在 react 组件的 componentDidMount 方法中打印一下 this.props,在浏览器控制台中查看输出如下:

其中页面的 url 信息全都包含在 match 字段中,

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

其中各个参数定义对应如下:

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

首先打印 this.props.match

可以看到 this.props.match 中包含的 url 信息还是非常丰富的,其中

history: 包含了组件可以使用的各种路由系统的方法,常用的有 push 和 replace,两者都是跳转页面,但是 replace 不会引起页面的刷新,仅仅是改变 url。

location: 相当于URL 的对象形式表示,通过 search 字段可以获取到 url 中的 query 信息。(这里 state 的含义与 HTML5 history.pushState API 中的 state 对象一样。每个 URL 都会对应一个 state 对象,你可以在对象里存储数据,但这个数据却不会出现在 URL 中。实际上,数据被存在了 sessionStorage 中)(参考: 深入理解 react-router 路由系统)

match: 包含了具体的 url 信息,在 params 字段中可以获取到各个路由参数的值。

通过以上分析,获取 url 中的指定参数就十分简单了,下面是几个例子:

// 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'

注意点:

如果这个值需要在页面中及时获得,这个时候就需要注意了,我们都知道react是有生命周期的,那么什么时候获取URL的值最合适呢?

  • 这个我推荐在componentDidMount 这个生命周期的时候去获取,因为这个时候页面已经挂在好了,完全可以拿到URL上面的值。

到此这篇关于React获取url后面参数的值示例代码的文章就介绍到这了,更多相关React获取url参数的值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • react项目升级报错,babel报错,.babelrc配置兼容等问题及解决

    react项目升级报错,babel报错,.babelrc配置兼容等问题及解决

    这篇文章主要介绍了react项目升级报错,babel报错,.babelrc配置兼容等问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • React使用TypeScript的最佳实践和技巧

    React使用TypeScript的最佳实践和技巧

    在React项目中使用TypeScript可以显著提高代码的可维护性和可读性,并提供强大的类型检查功能,减少运行时错误,以下是一些优雅地将TypeScript集成到React项目中的最佳实践和技巧,需要的朋友可以参考下
    2024-06-06
  • 在react中对less实现scoped配置方式

    在react中对less实现scoped配置方式

    这篇文章主要介绍了在react中对less实现scoped配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • ahooks useVirtualList 封装虚拟滚动列表

    ahooks useVirtualList 封装虚拟滚动列表

    这篇文章主要为大家介绍了ahooks useVirtualList 封装虚拟滚动列表详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 详解React 代码共享最佳实践方式

    详解React 代码共享最佳实践方式

    这篇文章主要介绍了React 代码共享最佳实践方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-05-05
  • React TypeScript 应用中便捷使用Redux Toolkit方法详解

    React TypeScript 应用中便捷使用Redux Toolkit方法详解

    这篇文章主要为大家介绍了React TypeScript 应用中便捷使用Redux Toolkit方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • React router动态加载组件之适配器模式的应用详解

    React router动态加载组件之适配器模式的应用详解

    这篇文章主要介绍了React router动态加载组件之适配器模式的应用 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • React错误的习惯用法分析详解

    React错误的习惯用法分析详解

    这篇文章主要为大家介绍了React错误用法习惯分析详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • React中jquery引用的实现方法

    React中jquery引用的实现方法

    这篇文章主要介绍了React中jquery引用的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • React创建组件的三种方式及其区别

    React创建组件的三种方式及其区别

    本文主要介绍了React创建组件的三种方式及其区别,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论