您可以在history组件之外使用这些方法。按以下方法试试。

首先，创建一个history使用历史包的对象：

// 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 中看到一个稍微不同的例子。

React Router v4 与 v3（及更早版本）有着根本的不同，你不能browserHistory.push()像以前那样做。

如果您想了解更多信息，此讨论似乎相关：

• 创建一个新的browserHistory将不起作用，因为<BrowserRouter>创建了它自己的历史实例，并监听了它的变化。因此，不同的实例将更改 url 但不会更新<BrowserRouter>.
• browserHistory 在 v4 中没有被 react-router 暴露，只在 v2 中暴露。

相反，您有几个选项可以做到这一点：

• 使用withRouter高阶组件

  相反，您应该使用withRouter高阶组件，并将其包装到将推送到历史记录的组件中。例如：

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

  查看官方文档了解更多信息：

  你可以访问history对象的属性和最近<Route>的match经withRouter高阶组件。withRouter会在每次航线用相同的props改变时重新渲染它的组件作为<Route>渲染props：{ match, location, history }。

• 使用contextAPI

  使用上下文可能是最简单的解决方案之一，但作为实验性 API，它不稳定且不受支持。仅当其他一切都失败时才使用它。下面是一个例子：

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

  查看有关上下文的官方文档：

  如果您希望您的应用程序稳定，请不要使用上下文。它是一个实验性的 API，它可能会在 React 的未来版本中被破坏。

  如果您不顾这些警告坚持使用上下文，请尝试将您对上下文的使用隔离到一个小区域，并尽可能避免直接使用上下文 API，以便在 API 更改时更容易升级。

现在使用 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

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

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

但是要使用这种方法，您现有的组件应该可以访问history对象。我们可以通过

1. 如果您的组件Route直接链接到，那么您的组件已经可以访问history对象。

   例如：

   <Route path="/profile" component={ViewProfile}/>
   

   这里ViewProfile可以访问history.

2. 如果不Route直接连接。

   例如：

   <Route path="/users" render={() => <ViewUsers/>}
   

   然后我们必须使用withRouter，一个更高阶的函数来扭曲现有的组件。

   内部 ViewUsers组件

   • import { withRouter } from 'react-router-dom';

   • export default withRouter(ViewUsers);

   就是这样，您的ViewUsers组件可以访问history对象。

更新

2- 在这种情况下，将所有路由传递props给您的组件，然后this.props.history即使没有访问我们也可以从组件访问HOC

例如：

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

我是这样做的：

import React, {Component} from 'react';

export default class Link extends Component {
    constructor(props) {
        super(props);
        this.onLogout = this.onLogout.bind(this);
    }
    onLogout() {
        this.props.history.push('/');
    }
    render() {
        return (
            <div>
                <h1>Your Links</h1>
                <button onClick={this.onLogout}>Logout</button>
            </div>
        );
    }
}

使用this.props.history.push('/cart');重定向到购物车页面将被保存在历史记录对象。

享受吧，迈克尔。