react路由跳转传递参数

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33168578/article/details/85258861

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

路由： <Route path='/confirmOrder' component={ConfirmOrder} />

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

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

取值：

this.props.location.query.deliveryPrice

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

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

取值:

this.props.location.state.deliveryPrice

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

1）引入browserHistory

import {browserHistory} from 'react-router' 

2）页面调用跳转方法

<span onClick={this.pushConfirmOrder}>去结算</span>

3）定义方法

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

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

 <li><span>配送费</span> <span>￥ {this.props.location.state.deliveryPrice}</span></li>