第
react如何获取URL中参数
目录react获取URL中参数react获取URL原理下面是几个例子react获取页面跳转URL携带的参数总结
react获取URL中参数
这个问题想必很多人都会遇到过，这里我说一下怎么获取URL中的参数。
react获取URL原理
在react组件的componentDidMount方法中打印一下ps，在浏览器控制台中查看输出如下：
其中页面的url信息全都包含在match字段中，
以地址localhost:3000/app/knowledgeManagement/modify/STY20171011124209535/3/1507701970070/0/s=1f=7为例
其中各个参数定义对应如下：
localhost:3000/app/knowledgeManagement/modify/:studyNo/:stepId/:randomNum/:isDefault/s=f=
首先打印ps.match：
可以看到ps.match中包含的url信息还是非常丰富的，其中
history：包含了组件可以使用的各种路由系统的方法，常用的有push和replace，两者都是跳转页面，但是replace不会引起页面的刷新，仅仅是改变url。location：相当于URL的对象形式表示，通过search字段可以获取到url中的query信息。（这里state的含义与HTML5history.pushStateAPI中的state对象一样。每个URL都会对应一个state对象，你可以在对象里存储数据，但这个数据却不会出现在URL中。实际上，数据被存在了sessionStorage中）（参考：深入理解react-router路由系统）match：包含了具体的url信息，在params字段中可以获取到各个路由参数的值。
通过以上分析，获取url中的指定参数就十分简单了
下面是几个例子
//localhost:3000/app/knowledgeManagement/modify/STY20171011124209535/3/1507701970070/0/s=1f=7
//localhost:3000/app/knowledgeManagement/modify/:studyNo/:stepId/:randomNum/:isDefault/s=1f=7
//获取studyNo
ps.match.match.params.studyNo//STY20171011124209535
//获取stepId
ps.match.match.params.stepId//3
//获取success
constquery=ps.match.location.search//s=1f=7
constarr=query.split()//[s=,f=7]
constsuccessCount=arr[0].substr(3)//1
constfailedCount=arr[1].substr(2)//7
注意点：
如果这个值需要在页面中及时获得，这个时候就需要注意了，我们都知道react是有生命周期的，那么什么时候获取URL的值最合适呢？
这个我推荐在componentDidMount这个生命周期的时候去获取，因为这个时候页面已经挂在好了，完全可以拿到URL上面的值。
react获取页面跳转URL携带的参数
比如这里有一条携带参数的url。type=1
我们要取出type的值。
因为获取页面跳转url携带的参数比较常用，所以我们把它封装成一个工具函数。
在src根目录下新建一个文件util.js
封装一个获取url参数的函数。
exportfunctiongetUrlParams(name,str){
??constreg=newRegExp(`(^|)${name}=([^]*)(|$)`);
??constr=str.substr(1).match(reg);
??if(r!=null)return?decodeURIComponent(r[2]);returnnull;
}
使用的时候，在当前页面导入这个函数
import{getUrlParams}from