我已经测试v4好几天了。到目前为止，我很喜欢它!过一段时间就明白了。

我也有同样的问题，我发现用下面的方法处理它是最好的(甚至可能是它的目的)。它使用state、三元操作符和<Redirect>。

在构造函数()中

this.state = {
    redirectTo: null
} 
this.clickhandler = this.clickhandler.bind(this);

在render()中

render(){
    return (
        <div>
        { this.state.redirectTo ?
            <Redirect to={{ pathname: this.state.redirectTo }} /> : 
            (
             <div>
               ..
             <button onClick={ this.clickhandler } />
              ..
             </div>
             )
         }

在clickhandler()中

 this.setState({ redirectTo: '/path/some/where' });

希望能有所帮助。让我知道。

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

我的答案和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';

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

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

如此:

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

const SomeComponent = withRouter(({ history }) => (
    <div onClick={() => history.push('/path/some/where')}>
        some clickable element
    </div>); 
);

export default SomeComponent;

因为有时我更喜欢通过应用程序切换路由，然后通过按钮，这是一个最小的工作示例，对我有用:

import { Component } from 'react'
import { BrowserRouter as Router, Link } from 'react-router-dom'

class App extends Component {
  constructor(props) {
    super(props)

    /** @type BrowserRouter */
    this.router = undefined
  }

  async handleSignFormSubmit() {
    await magic()
    this.router.history.push('/')
  }

  render() {
    return (
      <Router ref={ el => this.router = el }>
        <Link to="/signin">Sign in</Link>
        <Route path="/signin" exact={true} render={() => (
          <SignPage onFormSubmit={ this.handleSignFormSubmit } />
        )} />
      </Router>
    )
  }
}

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

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

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

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

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

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

这很简单，也很有力。