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的時候，我們想跳轉路徑，我們一般這樣處理

類似下面這樣

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

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

總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com