我已经测试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' });

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

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

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

TL; diana:

if (navigate) {
  return <Redirect to="/" push={true} />
}

简单和声明性的答案是，您需要结合setState()使用<Redirect to={URL} push={boolean} />

Push:布尔值——当为true时，重定向将把一个新条目推到历史记录中，而不是替换当前的条目。

import { Redirect } from 'react-router'

class FooBar extends React.Component {
  state = {
    navigate: false
  }

  render() {
    const { navigate } = this.state

    // here is the important part
    if (navigate) {
      return <Redirect to="/" push={true} />
    }
   // ^^^^^^^^^^^^^^^^^^^^^^^

    return (
      <div>
        <button onClick={() => this.setState({ navigate: true })}>
          Home
        </button>
      </div>
    )
  }
}

完整的例子。 点击这里阅读更多。

本例使用ES7+属性初始化器初始化状态。如果你感兴趣的话，也看看这里。

我已经测试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' });

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

我为此纠结了一段时间——如此简单，却又如此复杂，因为ReactJS只是一种完全不同的web应用程序编写方式，这对我们这些老年人来说非常陌生!

我创建了一个单独的组件来抽象混乱:

// LinkButton.js

import React from "react";
import PropTypes from "prop-types";
import {Route} from 'react-router-dom';

export default class LinkButton extends React.Component {

    render() {
        return (
            <Route render={({history}) => (
                <button {...this.props}
                       onClick={() => {
                           history.push(this.props.to)
                       }}>
                    {this.props.children}
                </button>
            )}/>
        );
    }
}

LinkButton.propTypes = {
    to: PropTypes.string.isRequired
};

然后将它添加到render()方法中:

<LinkButton className="btn btn-primary" to="/location">
    Button Text
</LinkButton>

我在迁移到React-Router v4时遇到了类似的问题，因此我将在下面解释我的解决方案。

请不要认为这个答案是解决问题的正确方法，我想随着React Router v4变得更加成熟并离开beta版，很有可能会出现更好的答案(它甚至可能已经存在，只是我没有发现它)。

就上下文而言，我遇到了这个问题，因为我偶尔使用Redux-Saga以编程方式更改历史对象(例如当用户成功验证时)。

在React Router文档中，看一下<Router>组件，你可以看到你有能力通过道具传递自己的历史对象。这是解决方案的本质——我们从全局模块向React-Router提供历史对象。

步骤:

Install the history npm module - yarn add history or npm install history --save create a file called history.js in your App.js level folder (this was my preference) // src/history.js import createHistory from 'history/createBrowserHistory'; export default createHistory();` Add this history object to your Router component like so // src/App.js import history from '../your/path/to/history.js;' <Router history={history}> // Route tags here </Router> Adjust the URL just like before by importing your global history object: import history from '../your/path/to/history.js;' history.push('new/path/here/');

现在所有内容都应该保持同步，您还可以通过编程方式设置历史对象，而不是通过组件/容器。