react路由跳轉傳遞引數
阿新 • • 發佈:2018-12-26
需求:路由跳轉的時候將引數傳遞給跳轉之後的頁面。
路由: <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>