React Router 页面传值的四种方法
来源:互联网 发布:淘宝食品类目 编辑:程序博客网 时间:2024/05/29 19:25
- 1
一. props.params
官方例子使用 React router 定义路由时,我们可以给<Route>
指定一个 path,然后指定通配符可以携带参数到指定的 path:
首先定义路由到 UserPage 页面:
- 1
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
上面指定参数一个参数 name
使用:
- 1
1.Link 组件实现跳转:
- 1
2.history 跳转:
- 1
当页面跳转到 UserPage 页面之后,取出传过来的值:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
上面的方法可以传递一个或多个值,但是每个值的类型都是字符串,没法传递一个对象, 如果传递的话可以将 json 对象转换为字符串,然后传递过去,传递过去之后再将 json 字符串转换为对象将数据取出来
如:定义路由:
- 1
使用:
- 1
- 2
- 3
- 1
- 1
获取数据:
- 1
- 2
通过这种方式跳转到 UserPage 页面时只能通过传递字符串来传递参数,那么是否有其他方法来优雅地直接传递对象而不仅仅是字符串呢?
二. query
query 方式使用很简单,类似于表单中的 get 方法,传递参数为明文:
首先定义路由:
- 1
使用:
- 1
- 2
- 3
- 4
- 5
- 1
- 1
获取数据:
- 1
- 2
query 方式可以传递任意类型的值,但是页面的 URL 也是由 query 的值拼接的,URL 很长,那么有没有办法类似于表单 post 方式传递数据使得传递的数据不以明文传输呢?
三. state
state 方式类似于 post 方式,使用方式和 query 类似,
首先定义路由:
- 1
使用:
- 1
- 2
- 3
- 4
- 5
- 1
- 1
获取数据:
- 1
- 2
state 方式依然可以传递任意类型的数据,而且可以不以明文方式传输。
四. onclick方法:
// 向详情页传递要传递的值 clickHandler(value) { browserHistory.push({ pathname: '/detail/' + value, query: { billName: value.brandNm, billTittle: value.ticketNm, billImg: value.billPicPath, billId: value.billId }, }) console.log(value); } }
<p>billName:{this.props.location.query.billName}</p>
<p>billTittle:{this.props.location.query.billTittle}</p>
<p>billId:{this.props.location.query.billId}</p>
<p>billImg:{this.props.location.query.billImg}</p>
可以在实现后对比地址栏的 URL 来观察三种传值方式 URL 的区别
阅读全文
1 0
- React Router 页面传值的四种方法
- React Router页面传值的三种方法
- React页面利用this.context.router.push跳转传参的接收方法
- vue-router 页面传参的俩种方法
- react-router跳转传值
- react-router跳转传值
- [React]react-router跳转传值
- React-router表单跳转两种方法
- react-router-dom 通过Link传值的坑人表现!
- React-Router传参取值页面跳转
- React+router+redux兼容ie8下的页面效果
- Webpack懒加载React Router的页面组件
- ReactNative React-native-router-flux框架---页面跳转与传值
- react-router 4.2.0<link>页面跳转-传参与不传参
- react-router的改变
- react-router与react-reduct配合使用时页面不刷新问题解决方法
- reacet-router跳转页面的方法总结
- javascript HTML静态页面传值的四种方法
- Prepare your Dataset
- 物联网核心之MQTT移植
- JSP 工作原理
- 51nod 1042数位DP 精度
- EditPlus远程连接linux编辑文件
- React Router 页面传值的四种方法
- feval,str2func
- Python学习之初始(三)
- mysql 常用命令语句
- react-native开发环境搭建
- 大数据预科班7
- 将高德地图的 API 接口返回地址保存到 MongoDB 中
- JDBC连接数据库MySQL
- Java基础部分第三节