摘要：相当于的对象形式表示，通过字段可以获取到中的信息。每个都会对应一个对象，你可以在对象里存储数据，但这个数据却不会出现在中。实际上，数据被存在了中包含了具体的信息，在字段中可以获取到各个路由参数的值。
在 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"
链接描述
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103606.html
摘要：最近闲来无事自学框架，自学过程中所有的问题经验都会在此记录，希望可以帮助到学习框架的同学废话不多说上代码。 最近闲来无事自学React框架，自学过程中所有的问题经验都会在此记录，希望可以帮助到学习React框架的同学,废话不多说上代码。首先是父传子： import React, { Component } from react; import Com1 from ./componmen...
摘要：右侧展现对应产品。我们使用命名为的对象表示过滤条件信息，如下此数据需要在组件中进行维护。因为组件的子组件和都将依赖这项数据状态。化应用再回到之前的场景，我们设计化函数，进一步可以简化为对于的偏应用即上面提到的相信大家已经理解了这么做的好处。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...
摘要：右侧展现对应产品。我们使用命名为的对象表示过滤条件信息，如下此数据需要在组件中进行维护。因为组件的子组件和都将依赖这项数据状态。化应用再回到之前的场景，我们设计化函数，进一步可以简化为对于的偏应用即上面提到的相信大家已经理解了这么做的好处。 showImg(https://segmentfault.com/img/remote/1460000014458612?w=1240&h=663...
摘要：原文地址是一个库，主要是通过操作数据的方式去操纵，为什么要重造轮子呢，因为觉的目前市面上的框架对于创建大型应用程序不够直观，不能满足需求，所以诞生了。其实说它性能高，只不过是用的方式计算出最小的操作，所以性能就上来了。 原文地址：https://gmiam.com/post/react-... React 是一个 JS 库，主要是通过操作数据的方式去操纵 DOM，为什么要重造轮子呢，因...
摘要：粗读近来没什么特别要做的事，下班回来的空闲时间也比较多，所以抽空看看懒加载是怎么实现的，特别是看了下的库的实现。之先别关注，按他给注释说测试用。之是组件绑定事件时会触发的函数。 react-lazy-load粗读 近来没什么特别要做的事，下班回来的空闲时间也比较多，所以抽空看看懒加载是怎么实现的，特别是看了下 react-lazy-load 的库的实现。 懒加载 这里懒加载场景不是路由...
阅读 1111·2021-11-23 09:51
阅读 1076·2021-10-18 13:31
阅读 2974·2021-09-22 16:06
阅读 4263·2021-09-10 11:19
阅读 2201·2019-08-29 17:04
阅读 427·2019-08-29 10:55
阅读 2474·2019-08-26 16:37
阅读 3374·2019-08-26 13:29
