文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

react如何获取URL中参数

2023-02-13 12:00

关注

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 信息还是非常丰富的,其中

通过以上分析,获取 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携带的参数

比如这里有一条携带参数的url。http://baidu.com?type=1

我们要取出type的值。

因为获取页面跳转url携带的参数比较常用,所以我们把它封装成一个工具函数。

在src根目录下新建一个文件util.js

封装一个获取url参数的函数。

export function getUrlParams(name, str) {
    const reg = new RegExp(`(^|&)${ name}=([^&]*)(&|$)`);
    const r = str.substr(1).match(reg);
    if (r != null) return  decodeURIComponent(r[2]); return null;
}

使用的时候,在当前页面导入这个函数

import { getUrlParams } from '../../util'

接下来就可以在componentDidMount之中获取这个type值

 componentDidMount(){
    const type = getUrlParams ('type',this.props.location.search);
    this.setState({
      type    //设置state
    })    
  }   

很简单,但是记一下

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯