react-router v4 的版本中 如何實現跳轉功能？

問題

當咱們使用react-router v3的時候，咱們想跳轉路由，咱們通常這樣處理

1. 咱們從react-router導出browserHistory。
2. 咱們使用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等的導出~~

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

解決方法

使用 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參數過去。。。