如果你正在使用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
    );
  }
}

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} />}

如果你想在将一个函数作为一个值传递给组件的prop时使用历史，使用react-router 4，你可以简单地在<Route/>组件的渲染属性中解构历史prop，然后使用history.push()

    <Route path='/create' render={({history}) => (
      <YourComponent
        YourProp={() => {
          this.YourClassMethod()
          history.push('/')
        }}>
      </YourComponent>
    )} />

注意:要做到这一点，你应该把React Router的BrowserRouter组件包裹在你的根组件(例如。可能在index.js中)

React Router v4与v3(以及更早的版本)有本质上的不同，你不能像以前那样执行browserHistory.push()。

如果你想了解更多信息，这个讨论似乎是相关的:

创建一个新的browserHistory将不起作用，因为<BrowserRouter>创建了自己的历史实例，并侦听其上的更改。因此，不同的实例将更改url，但不更新<BrowserRouter>。 react-router不会在v4中公开browserHistory，只会在v2中公开。

相反，你有几个选择来做到这一点:

Use the withRouter high-order component Instead you should use the withRouter high order component, and wrap that to the component that will push to history. For example: 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); Check out the official documentation for more info: You can get access to the history object’s properties and the closest <Route>'s match via the withRouter higher-order component. withRouter will re-render its component every time the route changes with the same props as <Route> render props: { match, location, history }.

Use the context API Using the context might be one of the easiest solutions, but being an experimental API it is unstable and unsupported. Use it only when everything else fails. Here's an example: 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"); } ... } Have a look at the official documentation on context: If you want your application to be stable, don't use context. It is an experimental API and it is likely to break in future releases of React. If you insist on using context despite these warnings, try to isolate your use of context to a small area and avoid using the context API directly when possible so that it's easier to upgrade when the API changes.

创建一个带有自己的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');
}

您可以在组件外部使用历史方法。试试下面的方法。

首先，使用历史包创建一个历史对象:

// src/history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

然后将它包装在<Router>中(请注意，你应该使用import {Router}而不是import {BrowserRouter as Router}):

// src/index.jsx

// ...
import { Router, Route, Link } from 'react-router-dom';
import history from './history';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
        </ul>
        <Route exact path="/" component={HomePage} />
        <Route path="/login" component={LoginPage} />
      </div>
    </Router>
  </Provider>,
  document.getElementById('root'),
);

从任何地方更改当前位置，例如:

// src/actions/userActionCreators.js

// ...
import history from '../history';

export function login(credentials) {
  return function (dispatch) {
    return loginRemotely(credentials)
      .then((response) => {
        // ...
        history.push('/');
      });
  };
}

UPD:你也可以在React Router FAQ中看到一个稍微不同的例子。