这个问题想必很多人都会遇到过，这里我说一下怎么获取URL中的参数。
在 react 组件的 componentDidMount 方法中打印一下 this.props，在浏览器控制台中查看输出如下：
其中页面的 url 信息全都包含在 match 字段中，
以地址 localhost:3000/app/knowledgeManagement/modify/STY/3/70/0/?s=1&f=7 为例
其中各个参数定义对应如下：
localhost:3000/app/knowledgeManagement/modify/:studyNo/:stepId/:randomNum/:isDefault/?s=&f=
首先打印 this.props.match ：
可以看到 this.props.match 中包含的 url 信息还是非常丰富的，其中
- ： 包含了组件可以使用的各种路由系统的方法，常用的有 push 和 replace，两者都是跳转页面，但是 replace 不会引起页面的刷新，仅仅是改变 url。
- ： 相当于URL 的对象形式表示，通过 search 字段可以获取到 url 中的 query 信息。（这里 state 的含义与 HTML5 history.pushState API 中的 state 对象一样。每个 URL 都会对应一个 state 对象，你可以在对象里存储数据，但这个数据却不会出现在 URL 中。实际上，数据被存在了 sessionStorage 中）（参考： 深入理解 react-router 路由系统）
- ： 包含了具体的 url 信息，在 params 字段中可以获取到各个路由参数的值。
通过以上分析，获取 url 中的指定参数就十分简单了
注意点：
如果这个值需要在页面中及时获得，这个时候就需要注意了，我们都知道react是有生命周期的，那么什么时候获取URL的值最合适呢？
这个我推荐在componentDidMount 这个生命周期的时候去获取，因为这个时候页面已经挂在好了，完全可以拿到URL上面的值。
比如这里有一条携带参数的url。http://baidu.com?type=1
我们要取出type的值。
因为获取页面跳转url携带的参数比较常用，所以我们把它封装成一个工具函数。
在src根目录下新建一个文件util.js
封装一个获取url参数的函数。
使用的时候，在当前页面导入这个函数
接下来就可以在componentDidMount之中获取这个type值
很简单，但是记一下
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
到此这篇react获取地址栏参数（react 获取url参数）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/73107.html