需求:路由跳转的时候将参数传递给跳转之后的页面。
路由: <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>