前言

距離React Router v4 正式發布也已經挺久了，這周把一個React的架子做了升級，之前的路由用的還是v2.7.0版的，所以決定把路由也升級下，正好“嘗嘗鮮”...

江湖傳言，目前官方同時維護 2.x 和 4.x 兩個版本。（ヾ(｡ꏿ﹏ꏿ)ﾉﾞ咦，此刻相信機智如我的你也會發現，ReactRouter v3 去哪兒了？整丟了？？巴拉出鍋了？？？敢不敢給我個完美的解釋！？）事實上 3.x 版本相比于 2.x 并沒有引入任何新的特性，只是將 2.x 版本中部分廢棄 API 的 warning 移除掉而已。按照規劃，沒有歷史包袱的新項目想要使用穩定版的 ReactRouter 時，應該使用 ReactRouter 3.x。目前 3.x 版本也還處于 beta 階段，不過會先于 4.x 版本正式發布。如果你已經在使用 2.x 的版本，那么升級 3.x 將不會有任何額外的代碼變動。

問題

當我們使用react-router v3的時候，我們想跳轉路徑，我們一般這樣處理

類似下面這樣

import browserHistory from 'react-router';export function addProduct(props) { return dispatch => axios.post(`xxx`, props, config) .then(response => { browserHistory.push('/cart'); //這里 });}

but!! 問題來了，在react-router v4中，不提供browserHistory等的導出~~

那怎么辦？我如何控制路由跳轉呢？？？

解決方法

1. 使用 withRouter

withRouter高階組件，提供了history讓你使用~

import React from "react";import {withRouter} from "react-router-dom";class MyComponent extends React.Component { ... myFunction() { this.props.history.push("/some/Path"); } ...}export default withRouter(MyComponent);

這是官方推薦做法哦。但是這種方法用起來有點難受，比如我們想在redux里面使用路由的時候，我們只能在組件把history傳遞過去。。

就像問題章節的代碼那種場景使用，我們就必須從組件中傳一個history參數過去。。。

2. 使用 Context

react-router v4 在 Router 組件中通過Contex暴露了一個router對象~

在子組件中使用Context，我們可以獲得router對象，如下面例子~

import React from "react";import PropTypes from "prop-types";class MyComponent extends React.Component { static contextTypes = { router: PropTypes.object } constructor(props, context) { super(props, context); } ... myFunction() { this.context.router.history.push("/some/Path"); } ...}

當然，這種方法慎用~盡量不用。因為react不推薦使用contex哦。在未來版本中有可能被拋棄哦。

3. hack

其實分析問題所在，就是v3中把我們傳遞給Router組件的history又暴露出來，讓我們調用了~~