创建一个带有自己的browserHistory的自定义路由器:

import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

const ExtBrowserRouter = ({children}) => (
  <Router history={history} >
  { children }
  </Router>
);

export default ExtBrowserRouter

接下来，在你定义路由器的根目录上，使用以下命令:

import React from 'react';       
import { /*BrowserRouter,*/ Route, Switch, Redirect } from 'react-router-dom';

//Use 'ExtBrowserRouter' instead of 'BrowserRouter'
import ExtBrowserRouter from './ExtBrowserRouter'; 
...

export default class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ExtBrowserRouter>
          <Switch>
            ...
            <Route path="/login" component={Login}  />
            ...
          </Switch>
        </ExtBrowserRouter>
      </Provider>
    )
  }
}

最后，在需要的地方导入历史记录并使用它:

import { history } from '../routers/ExtBrowserRouter';
...

export function logout(){
  clearTokens();      
  history.push('/login'); //WORKS AS EXPECTED!
  return Promise.reject('Refresh token has expired');
}

React Router 4中最简单的方法是使用

this.props.history.push('/new/url');

但是要使用此方法，您现有的组件应该能够访问历史对象。我们可以通过

If your component is linked to Route directly, then your component already has access to history object. eg: <Route path="/profile" component={ViewProfile}/> Here ViewProfile has access to history. If not connected to Route directly. eg: <Route path="/users" render={() => <ViewUsers/>} Then we have to use withRouter, a heigher order fuction to warp the existing component. Inside ViewUsers component import { withRouter } from 'react-router-dom'; export default withRouter(ViewUsers); That's it now, your ViewUsers component has access to history object.

更新

2-在这个场景中，将所有的路由道具传递给你的组件，然后我们可以从组件中访问this.props.history，即使没有一个HOC

eg:

<Route path="/users" render={props => <ViewUsers {...props} />}

这个棘手的问题，花了我很多时间，但最终，我是这样解决的:

用withRouter包装容器，并将历史记录传递给mapDispatchToProps函数中的动作。实际操作中使用history.push('/url')进行导航。

行动:

export function saveData(history, data) {
  fetch.post('/save', data)
     .then((response) => {
       ...
       history.push('/url');
     })
};

容器:

import { withRouter } from 'react-router-dom';
...
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    save: (data) => dispatch(saveData(ownProps.history, data))}
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Container));

这对React Router v4.x有效。

同样的话题也困扰着我。 我使用react-router-dom 5, Redux 4和BrowserRouter。 我更喜欢基于功能的组件和钩子。

像这样定义组件

import { useHistory } from "react-router-dom";
import { useDispatch } from "react-redux";

const Component = () => {
  ...
  const history = useHistory();
  dispatch(myActionCreator(otherValues, history));
};

你的动作创造者紧随其后

const myActionCreator = (otherValues, history) => async (dispatch) => {
  ...
  history.push("/path");
}

当然，如果不需要async，可以使用更简单的动作创建器

现在在react-router v5中，你可以像这样使用useHistory钩子:

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

详情请访问:https://reacttraining.com/react-router/web/api/Hooks/usehistory

如果你正在使用Redux，那么我建议使用npm包react-router-redux。它允许您分派Redux存储导航操作。

你必须在他们的自述文件中创建存储。

最简单的用例:

import { push } from 'react-router-redux'

this.props.dispatch(push('/second page'));

容器/组件的第二个用例:

容器:

import { connect } from 'react-redux';
import { push } from 'react-router-redux';

import Form from '../components/Form';

const mapDispatchToProps = dispatch => ({
  changeUrl: url => dispatch(push(url)),
});

export default connect(null, mapDispatchToProps)(Form);

组件:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Form extends Component {
  handleClick = () => {
    this.props.changeUrl('/secondPage');
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}/>
      </div>Readme file
    );
  }
}