React-router（8）Link 标签 to 属性为对象时（路由信息传值）

8、Link 标签 to 属性为对象时（路由信息传值）

DEMO地址

参考 6.routeInfo.js

在组件里，每个组件的路由数据，都是各自独立的。

在之前分析中，已知：

match 属性的值，存储的是该 Route 标签的路由；
location 属性的值，其中 url 和 path 不同 Route 组件中，值是相同的；

但【2】并不准确，准确的说，自带的 hash ， search ， pathname 这三个属性的值，是相同的；

假如你在里面添加了其他数据，那么结果就有所不同了。

例如 Link 标签，他有一个属性 to，可以用于路径跳转。

比较常见的是以下这种写法：

<Link to={`${props.match.url}/`}>子路由</Link>

但是，to 的值，也可以用对象，例如这样：

<Link to={{pathname: `${this.props.match.url}/1`,myState: '这是我自定义的变量'
}}>示例1</Link>

当路由信息匹配时（参照DEMO）：

1、父组件的路由信息为：

{"match": {"path": "/RouteInfo","url": "/RouteInfo","isExact": false,"params": {}},"location": {"pathname": "/RouteInfo/1","search": "","hash": ""},"history": {"length": 9,"action": "POP","location": {"pathname": "/RouteInfo/1","search": "","hash": ""}}
}

2、被传值的子组件的路由信息：

{"match": {"path": "/RouteInfo/1","url": "/RouteInfo/1","isExact": true,"params": {}},"location": {"pathname": "/RouteInfo/1","myState": "这是我自定义的变量","search": "","hash": ""},"history": {"length": 24,"action": "PUSH","location": {"pathname": "/RouteInfo/1","myState": "这是我自定义的变量","search": "","hash": ""}}
}

可以看到，被传值的子组件的路由信息，location 会多了一个属性。

但是请注意，以下几种情况会导致失去这些信息：

刷新页面；
访问更深一层的子组件（因为信息被更新了）；
刷新后，访问相同的 url。举例来说，你访问了该 url，传值了也收到了，然后刷新页面，再点击该 url，是没有的。原因是相同 url 跳转；

React-router（8）Link 标签 to 属性为对象时（路由信息传值）相关推荐

[html] link标签的属性media有哪些值？都有什么作用？
[html] link标签的属性media有哪些值?都有什么作用? 根据w3c的介绍,media属性表示link的链接文档会应用于何种媒介(设备)上.用于为不同的媒介类型规定不同的样式.常用的值为sc ...
QTP的那些事---通过html标签的属性获取对象（类似onclick的属性)
看到这个问题,有的人可能觉得就是通过DOM获取呗.我承认确实是通过DOM获取,唯一不同的是我通过的是html中标签的属性获取的. 代码如下: On error resume next btv=&quo ...
关于proxy模式下，@Transactional标签在创建代理对象时的应用
@Transactional标签用于Spring中的事务标记. 先简单说下几个概念: 1)Spring的AOP是应用于Spring管理的bean上并基于代理实现的,代理的方法有java动态代理和C ...
React Router 学习
本次使用react-router 版本为 5.0.1 本教程前提是你的应用程序是一个web应用程序,使用'react-router-dom'包来实现页面的路由在React router中有三种类型的 ...
react router v4 简介
最近使用react router 遇到一个问题:当对某个路由添加参数的时候/list/:app 这列路由,点击这个路由以后再点击其他路由,location地址就追加到后面,问不是replace. /l ...
react更改路由入参_JavaScript基础教程 react router路由传参
本篇教程介绍了JavaScript基础教程 react router路由传参,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 今天,我们要讨论的是react ...
html+link作用,html link标签有什么作用？html link标签的定义及属性介绍
html link标签有什么作用?html link标签中定义及属性介绍,下面开始本章的内容,主要给大家说的是html link标签的定义和作用,还有HTML link标签的属性介绍及属性作用 htm ...
link标签 a标签总结
参考https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link https://www.runoob.com/tags/tag-a.h ...
hitchhiker部署_Hitchhiker的React Router v4指南：20分钟内完成Grok React Router
hitchhiker部署 Hi fellow React Hitchhiker! Want a ride into React Router? Jump in. Let's go! 大家好,React ...

React-router（8）Link 标签 to 属性为对象时（路由信息传值）

8、Link 标签 to 属性为对象时（路由信息传值）

React-router（8）Link 标签 to 属性为对象时（路由信息传值）相关推荐

最新文章

热门文章