React 之 this.props

在 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 中）
• 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'

连接描述