在react-router中如何使用history控制路由（詳細教學）

這篇文章主要為大家介紹了關於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(&#39;root&#39;),
);

其他地方我們就可以這樣用了

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組件。嘿嘿。

講到這裡也結束了，我自己目前在使用第三種方法，雖然官方推薦第一種，我覺得用著比較麻煩唉。 ~

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

js中實作MVVM框架（詳細教學）

requireJS如何實作模組載入器？

仿淘寶的JSsearch搜尋（詳細教學）

#在jquery中on和click的差異有哪些？

Angular 2 樣式綁定有哪些方式

#

以上是在react-router中如何使用history控制路由（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！