React 获取 url 参数 —— this.props.match
2017-10-26 19:47
597 查看
在react组件的 componentDidMount 方法中打印一下 this.props,其中页面的 url 信息全都包含在 match 字段中,以地址
为例,其中各个参数定义对应如下:
首先打印 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 中的指定参数就十分简单了,下面是几个例子:
react-router 4.0 对于接受参数采用 { this.props.match.params.id }
如下例子:<Route path="list/:id"></Router>
<Link to="list/123456"></Link>
获取参数值的方式是:{ this.props.match.params.id } 可选参数path="list/:id?"
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-router 4.0 对于接受参数采用 { this.props.match.params.id }
如下例子:<Route path="list/:id"></Router>
<Link to="list/123456"></Link>
获取参数值的方式是:{ this.props.match.params.id } 可选参数path="list/:id?"
相关文章推荐
- React 获取 url 参数 —— this.props.match
- react如何在组件中获取路由参数?this.props.params.id
- react获取url查询参数
- javascript match方法获取url参数的正则表达式(用来获取某个参数值)很重要!!!!!
- 获取url参数window.location.search.substr(1).match(reg)
- React Js Router 获取地址栏url参数
- react获取URL中参数
- 日常问题记录--JSP页面中通过<s:property value="#parameters.userName[0]>获取URL参数中文时为乱码的解决办法
- 使用jquery获取url参数
- Javascript escape 解决 Jquery Ajax 异步请求 URL中文传参乱码问题 一般处理程序Handler获取参数
- REST技术第二步 获取URL中的参数
- 使用JavaScript获取URL参数
- Javascript-获取URL请求参数
- 根据URL获取参数值得出json结果集,对外给一个接口让别人调用
- js获取GET URL参数
- js获取url传递参数
- js获取url传递参数,js获取url?号后面的参数
- javascript获取URL参数与参数值的示例代码
- js 获取当前url参数
- Js获取url中的参数(已解决出现的中文乱码问题)