1. 程式人生 > >react路由跳轉傳遞引數

react路由跳轉傳遞引數

需求:路由跳轉的時候將引數傳遞給跳轉之後的頁面。

路由: <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>