react在router中传递数据的2种方法
2024-08-28 11:50:11
概述
不传递数据叫什么单页面应用,渲染模块还需要http请求算什么单页面应用。
本文总结了react-router4中使用BrowserRouter时传递数据的两种方法,供以后开发参考,相信对其他人也有用。
使用Link
Link是react-router4中很常见的一个类,很多人在页面跳转的时候都会用到它。在用Link的时候传递数据的方法如下:
import { Link } from 'react-router-dom';
//不传递数据
<Link to={模块路径}>{内容}</Link>
//传递数据,在目标模块用this.props.location.state调用数据。
<Link to={{
pathname: {模块路径},
state: {数据}
}}>{内容}</Link>
使用history.push
history是H5中引入的,以前人们都用hash。
react-router4中有好几种方法使用history.push。下面我介绍使用BrowserRouter时使用的方法。
import { withRouter } from 'react-router-dom';
//不传递数据
this.props.history.push({目标模块路径});
//传递数据,在目标模块用this.props.location.state调用数据。
this.props.history.push({
pathname:{目标模块路径},
state:{数据}
})
export default withRouter(自身模块名)
区别
在点击的时候跳转并传递数据:既可用Link方法,也可以用history.push方法(需要结合Onclick方法,在点击事件的回调函数里面调用history.push)。
用js控制跳转并传递数据:只能用history.push方法。(直接在js中使用history.push)
另外说下,在模块中获取路由的/:id中的id:在this.props.match.params.id
中获取。(其中id可换为其它参数。)
最新文章
- C# 线程调用主线程中的控件
- 2018. The Debut Album
- 洛谷 P1111 修复公路 Label:并查集
- overlay-scrollbar-js
- poj 3252 组合数
- 【转】XCode环境变量及路径设置 -- 待学习
- Ajax日记
- Shell终端收听音乐--网易云音乐命令行版
- bzoj1449————2016——3——14
- 201521123005 《Java程序设计》 第十四周学习总结
- Java点滴之Java概述
- 在windows和Linux上安装ImageMagick与jmagick,Maven配置、Java图片压缩代码(整理网上、结合自己情况、编写出来的新安装方式)
- SSH密钥对登录的原理和实践
- docker中mysql数据库的数据导入和导出
- kubernetes promethues预警、报警
- 安装Eclipse时遇到”java was started but returned exit code = 13“如何解决?
- 【Java】 剑指offer(38) 字符串的排列
- 天使玩偶:CDQ分治
- Java 语言多态性
- 【Nodejs】外研社一年级起三年级下MP3下载爬虫1.00