带挂钩的React Router v6

import {useNavigate} from 'react-router-dom';
let navigate = useNavigate();
navigate('home');

为了浏览浏览器历史，

navigate(-1); ---> Go back
navigate(1);  ---> Go forward
navigate(-2); ---> Move two steps backward.

React路由器v2

对于最新版本（v2.0.0-rc5），推荐的导航方法是直接推到历史单例。您可以在组件外部导航文档中看到这一点。

相关摘录：

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

如果使用更新的react router API，则需要在组件内部使用this.props中的历史记录，以便：

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

它还提供pushState，但对于每个记录的警告，它都是不推荐的。

如果使用react router redux，它提供了一个推送功能，您可以这样调度：

import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));

然而，这可能仅用于更改URL，而不是实际导航到页面。

在react router的上下文中，已经有大量的答案可以正确、准确地回答这个问题，但我想花点时间指出一些我在其他答案中没有提到的问题。

这是一种stackoverflow的比喻，建议用与原始问题不同的方式来做一些事情，但在这种情况下，由于问题的年龄，我觉得在当前的时间里，问题的表述会有所不同。

我建议放弃react router，只需通过window.location.href=[yoururlhere]推送到本地浏览器位置，然后通过正则表达式（或确切的）匹配window.location.pathname和您的预期路径来检查路径。

更简单的答案通常是最好的答案，在这种情况下，React Router的用例由本地位置对象API提供更好的服务。

对于React路由器v4+

假设在初始渲染过程中不需要导航（可以使用＜Redirect＞组件），这就是我们在应用程序中所做的。

定义返回null的空路由。这将允许您访问历史对象。您需要在定义路由器的顶层执行此操作。

现在，您可以在历史上做所有可以做的事情，如history.push（）、history.replace（）、history.go（-1）等。！

import React from 'react';
import { HashRouter, Route } from 'react-router-dom';

let routeHistory = null;

export function navigateTo(path) {
  if(routeHistory !== null) {
    routeHistory.push(path);
  }
}

export default function App(props) {
  return (
    <HashRouter hashType="noslash">
      <Route
        render={({ history }) => {
          routeHistory = history;
          return null;
        }}
      />
      {/* Rest of the App */}
    </HashRouter>
  );
}

在写作时，正确的答案适合我

this.context.router.history.push('/');

但您需要将PropTypes添加到组件中

Header.contextTypes = {
  router: PropTypes.object.isRequired
}
export default Header;

不要忘记导入PropTypes

import PropTypes from 'prop-types';

对于当前的React版本（15.3），this.props.history.push（'/location'）；对我有用，但它显示了以下警告：

browser.js:49警告：[creact router]props.history和context.hhistory已弃用。请使用context.router。

我用context.router解决了这个问题：

import React from 'react';

class MyComponent extends React.Component {

    constructor(props) {
        super(props);
        this.backPressed = this.backPressed.bind(this);
    }

    backPressed() {
        this.context.router.push('/back-location');
    }

    ...
}

MyComponent.contextTypes = {
    router: React.PropTypes.object.isRequired
};

export default MyComponent;