react路由跳转传递参数

需求:路由跳转的时候将参数传递给跳转之后的页面。

路由: 

方案一:使用query,特点是参数会出现在url上,刷新页面数据不会丢失

browserHistory.push({pathname:'/confirmOrder', query : { deliveryPrice: this.props.deliveryPrice }})

取值:

this.props.location.query.deliveryPrice

react路由跳转传递参数_第1张图片

方案二:使用state,特点:参数不会出现在地址栏,刷新页面数据不会消失

browserHistory.push({pathname:'/confirmOrder', state : { deliveryPrice: this.props.deliveryPrice }})

取值:

this.props.location.state.deliveryPrice

>>>路由跳转的完整步骤

1)引入browserHistory

import {browserHistory} from 'react-router' 

2)页面调用跳转方法

去结算

3)定义方法

pushConfirmOrder(){
        browserHistory.push({pathname:'/confirmOrder', state : { deliveryPrice: this.props.deliveryPrice }})
 }

4)使用路由跳转之后的参数

 
  • 配送费 ¥ {this.props.location.state.deliveryPrice}
  •  

    你可能感兴趣的:(react)