這篇文章主要為大家介紹了關於react-router v4如何使用history控制路由跳轉的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面隨著我來一起學習學習吧。
前言
距離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的時候，我們想要跳轉路徑，我們通常這樣處理
我們從react-router匯出browserHistory。
我們使用browserHistory.push()等等方法操作路由跳轉。
類似下面這樣
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又暴露出來，讓我們呼叫了~~
而react-router v4 的元件BrowserRouter自己創造了history，也不曝光出來，不讓我們引用了。尷尬~
我們可以不使用建議的BrowserRouter，依舊使用Router元件。我們自己創建history，其他地方呼叫自己創建的history。看程式碼~
我們自己建立一個history
// src/history.js import createHistory from 'history/createBrowserHistory'; export default createHistory();
我們使用Router元件
// src/index.js
import { Router, Link, Route } from 'react-router-dom';
import history from './history';
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
...
</Router>
</Provider>,
document.getElementById('root'),
);其他地方我們就可以這樣用了
import history from './history';
export function addProduct(props) {
return dispatch =>
axios.post(`xxx`, props, config)
.then(response => {
history.push('/cart'); //这里
});
}# 4. 我非要用BrowserRouter
確實，react-router v4推薦使用BrowserRouter元件，而在第三個解法中，我們拋棄了這個元件，又回退使用了Router元件。
怎麼辦。你去看看BrowserRouter的源碼，我覺得你就豁然開朗了。
原始碼非常簡單，沒什麼東西。我們完全自己寫一個BrowserRouter組件，然後替換第三種解決方法中的Router組件。嘿嘿。
講到這裡也結束了，我自己目前在使用第三種方法，雖然官方推薦第一種，我覺得用著比較麻煩唉。 ~
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
#以上是在react-router中如何使用history控制路由（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
