第一步:只需要在上面导入一个东西:

import {Route} from 'react-router-dom';

第二步:在Route中，传递历史记录:

<Route
  exact
  path='/posts/add'
  render={({history}) => (
    <PostAdd history={history} />
  )}
/>

第三步:历史被接受为下一个组件的道具的一部分，所以你可以简单地:

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

这很简单，也很有力。

你也可以简单地使用props来访问历史对象:

第一步:只需要在上面导入一个东西:

import {Route} from 'react-router-dom';

第二步:在Route中，传递历史记录:

<Route
  exact
  path='/posts/add'
  render={({history}) => (
    <PostAdd history={history} />
  )}
/>

第三步:历史被接受为下一个组件的道具的一部分，所以你可以简单地:

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

这很简单，也很有力。

我认为@rgommezz涵盖了大多数情况，除了一个我认为非常重要的情况。

// history is already a dependency or React Router, but if don't have it then try npm install save-dev history

import createHistory from "history/createBrowserHistory"

// in your function then call add the below 
const history = createHistory();
// Use push, replace, and go to navigate around.
history.push("/home");

这允许我写一个简单的服务与动作/调用，我可以调用从任何组件做导航，而不需要在我的组件上做很多HoC…

目前还不清楚为什么以前没有人提供这种解决方案。我希望它能有所帮助，如果你看到任何问题，请告诉我。

我的答案和Alex的相似。我不知道为什么React-Router把这个做得如此复杂。为什么我必须用一个HoC来包装我的组件，只是为了访问本质上是全局的?

不管怎样，如果你看一下他们是如何实现<BrowserRouter>的，它只是一个历史记录的小包装。

我们可以把这段历史提取出来，这样我们就可以从任何地方导入。然而，诀窍在于，如果您正在进行服务器端呈现，并试图导入历史模块，那么它将无法工作，因为它使用的是纯浏览器api。但这没关系，因为我们通常只在响应单击或其他客户端事件时重定向。因此，假装一下是可以的:

// history.js
if(__SERVER__) {
    module.exports = {};
} else {
    module.exports = require('history').createBrowserHistory();
}

在webpack的帮助下，我们可以定义一些变量，这样我们就知道我们所处的环境:

plugins: [
    new DefinePlugin({
        '__SERVER__': 'false',
        '__BROWSER__': 'true', // you really only need one of these, but I like to have both
    }),

现在你可以

import history from './history';

从任何地方。它只会在服务器上返回一个空模块。

如果你不想使用这些神奇的变量，你只需要在需要它的全局对象中(在你的事件处理程序中)。导入不能工作，因为它只在顶层工作。

this.props.history.push("/url")

如果您在组件中没有找到this.props.history可用， 那就试试这个

import {withRouter} from 'react-router-dom'
export default withRouter(MyComponent)