当前第2页 返回上一页
如：定义路由：
1 | <Route path='/user/:data' component={UserPage}></Route>
|
使用：
1 2 3 4 5 | var data = {id:3,name:sam,age:36};
data = JSON.stringify(data);
var path = `/user/${data}`;
<Link to={path}>用户</Link>
hashHistory.push(path);
|
获取数据：
1 2 | var data = JSON.parse(this.props.params.data);
var {id,name,age} = data;
|
通过这种方式跳转到UserPage页面时只能通过传递字符串来传递参数，那么是否有其他方法来优雅地直接传递对象而不仅仅是字符串呢？
二、query
query方式使用很简单，类似于表单中的get方法，传递参数为明文：
首先定义路由：
1 | <Route path='/user' component={UserPage}></Route>
|
使用：
1 2 3 4 5 6 7 | var data = {id:3,name:sam,age:36};
var path = {
pathname:'/user',
query:data,
}
<Link to={path}>用户</Link>
hashHistory.push(path);
|
获取数据：
1 2 | var data = this.props.location.query;
var {id,name,age} = data;
|
query方式可以传递任意类型的值，但是页面的URL也是由query的值拼接的，URL很长，那么有没有办法类似于表单post方式传递数据使得传递的数据不以明文传输呢？
三、state
state方式类似于post方式，使用方式和query类似，
首先定义路由：
1 | <Route path='/user' component={UserPage}></Route>
|
使用：
1 2 3 4 5 6 7 | var data = {id:3,name:sam,age:36};
var path = {
pathname:'/user',
state:data,
}
<Link to={path}>用户</Link>
hashHistory.push(path);
|
获取数据：
1 2 | var data = this.props.location.state;
var {id,name,age} = data;
|
state方式依然可以传递任意类型的数据，而且可以不以明文方式传输。
可以在实现后对比地址栏的URL来观察三种传值方式URL的区别
相关学习推荐：javascript学习教程
以上就是react中页面如何传值的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
React中monent如何获取日期？
vue和React属于js库吗
React遵循的原则是什么
React中什么必须大写
vue 和 React 的优点有哪些
安装React脚手架会报错怎么办
React中jsx是什么
为什么React适合做大型项目？
vue.js怎么实现页面传值
用React怎么实现收藏功能
更多相关阅读请进入《React》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » react中页面如何传值
