前言

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

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

問(wèn)題

當(dāng)我們使用react-router v3的時(shí)候，我們想跳轉(zhuǎn)路徑，我們一般這樣處理

• 我們從react-router導(dǎo)出browserHistory。
• 我們使用browserHistory.push()等等方法操作路由跳轉(zhuǎn)。

類(lèi)似下面這樣

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

but!! 問(wèn)題來(lái)了，在react-router v4中，不提供browserHistory等的導(dǎo)出~~

那怎么辦？我如何控制路由跳轉(zhuǎn)呢？？？

解決方法

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);

這是官方推薦做法哦。但是這種方法用起來(lái)有點(diǎn)難受，比如我們想在redux里面使用路由的時(shí)候，我們只能在組件把history傳遞過(guò)去。。

就像問(wèn)題章節(jié)的代碼那種場(chǎng)景使用，我們就必須從組件中傳一個(gè)history參數(shù)過(guò)去。。。

2. 使用 Context

react-router v4 在 Router 組件中通過(guò)Contex暴露了一個(gè)router對(duì)象~

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

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");
 }
 ...
}

當(dāng)然，這種方法慎用~盡量不用。因?yàn)閞eact不推薦使用contex哦。在未來(lái)版本中有可能被拋棄哦。

3. hack

其實(shí)分析問(wèn)題所在，就是v3中把我們傳遞給Router組件的history又暴露出來(lái)，讓我們調(diào)用了~~

而react-router v4 的組件BrowserRouter自己創(chuàng)建了history，并且不暴露出來(lái)，不讓我們引用了。尷尬~

我們可以不使用推薦的BrowserRouter，依舊使用Router組件。我們自己創(chuàng)建history，其他地方調(diào)用自己創(chuàng)建的history?？创a~

我們自己創(chuàng)建一個(gè)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

確實(shí)，react-router v4推薦使用BrowserRouter組件，而在第三個(gè)解決方案中，我們拋棄了這個(gè)組件，又回退使用了Router組件。

怎么辦。 你去看看BrowserRouter的源碼，我覺(jué)得你就豁然開(kāi)朗了。

源碼非常簡(jiǎn)單，沒(méi)什么東西。我們完全自己寫(xiě)一個(gè)BrowserRouter組件，然后替換第三種解決方法中的Router組件。嘿嘿。

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

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論