最简单的方法是:

this.props.history.push（“/new/url”）

注意:

如果历史道具不可用，你可以将它从父组件传递到你想调用该动作的组件。

我为此纠结了一段时间——如此简单，却又如此复杂，因为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或React router Dom完全初始化路由器之前需要重定向的人，你可以通过简单地访问历史对象并在app.js的结构中将一个新状态推到它上来提供重定向。考虑以下几点:

function getSubdomain(hostname) {
    let regexParse = new RegExp('[a-z\-0-9]{2,63}\.[a-z\.]{2,5}$');
    let urlParts = regexParse.exec(hostname);
    return hostname.replace(urlParts[0], '').slice(0, -1);
}

class App extends Component {

    constructor(props) {
        super(props);


        this.state = {
            hostState: true
        };

        if (getSubdomain(window.location.hostname).length > 0) {
            this.state.hostState = false;
            window.history.pushState('', '', './login');
        } else {
            console.log(getSubdomain(window.location.hostname));
        }

    }


    render() {
        return (

            <BrowserRouter>
                {this.state.hostState ? (
                    <div>
                        <Route path="/login" component={LoginContainer}/>
                        <Route path="/" component={PublicContainer}/>
                    </div>
                ) : (
                    <div>
                        <Route path="/login" component={LoginContainer}/>
                    </div>
                )

                }
            </BrowserRouter>)
    }


}

在这里，我们想要改变依赖于子域的输出路由，通过在组件呈现之前与历史对象交互，我们可以有效地重定向，同时仍然保留我们的路由。

window.history.pushState('', '', './login');

如果你的目标是浏览器环境，你需要使用react-router-dom包，而不是react-router。他们遵循与React相同的方法，为了分离核心(React)和特定于平台的代码(React -dom, React -native)，有细微的区别，你不需要安装两个单独的包，所以环境包包含了你需要的一切。你可以把它添加到你的项目中:

Yarn添加react-router-dom

or

我react-router-dom

您需要做的第一件事是提供一个<BrowserRouter>作为应用程序中最顶层的父组件。<BrowserRouter>使用HTML5历史API并为您管理它，因此您不必担心自己实例化它并将其传递给<BrowserRouter>组件作为道具(正如您在以前的版本中需要做的那样)。

在V4中，为了以编程方式导航，你需要访问历史对象，它可以通过React上下文获得，只要你在应用程序中有一个<BrowserRouter>提供者组件作为最顶层的父组件。该库通过上下文公开路由器对象，该对象本身包含历史作为属性。历史界面提供了一些导航方法，例如push、replace和goBack等。您可以在这里查看整个属性和方法列表。

Redux/Mobx用户注意事项 如果您在应用程序中使用redux或mobx作为状态管理库，那么您可能会遇到组件应该是位置感知的，但在触发URL更新后没有重新呈现的问题

这是因为react-router使用上下文模型将位置传递给组件。

connect和observer都创建了组件，它们的shouldComponentUpdate方法会对当前的道具和下一个道具进行简单的比较。这些组件只有在至少一个道具发生变化时才会重新渲染。这意味着，为了确保它们在位置更改时更新，它们将需要在位置更改时更改道具。

解决这个问题的两种方法是:

将连接的组件包装在一个无路径的<Route />。当前位置对象是<Route>传递给它呈现的组件的道具之一 使用withRouter高阶组件包装连接的组件，实际上具有相同的效果，并将位置作为道具注入

撇开这个不谈，有四种按推荐顺序进行编程导航的方法:

1.- Using a <Route> Component It promotes a declarative style. Prior to v4, <Route /> components were placed at the top of your component hierarchy, having to think of your routes structure beforehand. However, now you can have <Route> components anywhere in your tree, allowing you to have a finer control for conditionally rendering depending on the URL. Route injects match, location and history as props into your component. The navigation methods (such as push, replace, goBack...) are available as properties of the history object.

有三种方法来渲染一个Route，通过使用组件，渲染或子道具，但不要在同一个Route中使用多个。选择取决于用例，但基本上前两个选项只在路径与url位置匹配时才会呈现组件，而对于子组件，无论路径与位置是否匹配都将呈现(这对于基于url匹配调整UI很有用)。

如果你想定制你的组件渲染输出，你需要将你的组件包装在一个函数中，并使用渲染选项，以便传递给你的组件任何其他你想要的道具，除了匹配，位置和历史记录。举例说明:

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

const ButtonToNavigate = ({ title, history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    {title}
  </button>
);

const SomeComponent = () => (
  <Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} />
)    

const App = () => (
  <Router>
    <SomeComponent /> // Notice how in v4 we can have any other component interleaved
    <AnotherComponent />
  </Router>
);

2.-与throuter HoC一起使用

这个高阶组件将注入与Route相同的道具。但是，它有一个限制，每个文件只能有1个HoC。

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

const ButtonToNavigate = ({ history }) => (
  <button
    type="button"
    onClick={() => history.push('/my-new-location')}
  >
    Navigate
  </button>
);


ButtonToNavigate.propTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired,
  }),
};

export default withRouter(ButtonToNavigate);

3.使用重定向组件渲染<Redirect>将导航到一个新的位置。但是请记住，默认情况下，当前位置将被新位置替换，如服务器端重定向(HTTP 3xx)。新的位置由to prop提供，它可以是一个字符串(要重定向到的URL)或一个location对象。如果您想将一个新条目推送到历史记录中，也可以传递一个推送道具，并将其设置为true

<Redirect to="/your-new-location" push />

4.有点不鼓励，因为上下文仍然是一个实验性的API，它很可能在React的未来版本中被破坏/改变

const ButtonToNavigate = (props, context) => (
  <button
    type="button"
    onClick={() => context.router.history.push('/my-new-location')}
  >
    Navigate to a new location
  </button>
);

ButtonToNavigate.contextTypes = {
  router: React.PropTypes.shape({
    history: React.PropTypes.object.isRequired,
  }),
};

不用说，还有其他的路由器组件是针对非浏览器生态系统的，比如<NativeRouter>，它在内存中复制了一个导航堆栈，目标是React Native平台，可以通过React - Router - Native包获得。

如需进一步参考，请参阅官方文档。还有一个由该库的共同作者之一制作的视频，该视频非常酷地介绍了react-router v4，突出了一些主要的变化。

我在迁移到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/');

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

最简单的方法是:

this.props.history.push（“/new/url”）

注意:

如果历史道具不可用，你可以将它从父组件传递到你想调用该动作的组件。