更新 React v16 和 ReactRouter v4.2.0（2017 年 10 月）：

class BackButton extends Component {
  static contextTypes = {
    router: () => true, // replace with PropTypes.object if you use them
  }

  render() {
    return (
      <button
        className="button icon-left"
        onClick={this.context.router.history.goBack}>
          Back
      </button>
    )
  }
}

更新 React v15 和 ReactRouter v3.0.0（2016 年 8 月）：

var browserHistory = ReactRouter.browserHistory;

var BackButton = React.createClass({
  render: function() {
    return (
      <button
        className="button icon-left"
        onClick={browserHistory.goBack}>
        Back
      </button>
    );
  }
});

创建了一个带有嵌入式 iframe 的更复杂示例的小提琴：https : //jsfiddle.net/kwg1da3a/

React v14 和 ReacRouter v1.0.0（2015 年 9 月 10 日）

你可以这样做：

var React = require("react");
var Router = require("react-router");

var SomePage = React.createClass({
  ...

  contextTypes: {
    router: React.PropTypes.func
  },
  ...

  handleClose: function () {
    if (Router.History.length > 1) {
      // this will take you back if there is history
      Router.History.back();
    } else {
      // this will take you to the parent route if there is no history,
      // but unfortunately also add it as a new route
      var currentRoutes = this.context.router.getCurrentRoutes();
      var routeName = currentRoutes[currentRoutes.length - 2].name;
      this.context.router.transitionTo(routeName);
    }
  },
  ...

你需要小心，你有必要的历史可以回去。如果您直接点击页面然后回击，它会将您带回到应用程序之前的浏览器历史记录中。

此解决方案将处理这两种情况。但是，它不会处理可以使用后退按钮在页面内导航（并添加到浏览器历史记录）的 iframe。坦率地说，我认为这是react-router中的一个错误。问题在这里创建：https : //github.com/rackt/react-router/issues/1874

使用 React 钩子

进口：

import { useHistory } from "react-router-dom";

在无状态组件中：

let history = useHistory();

调用事件：

history.goBack()

示例在事件按钮中使用：

<button onClick={history.goBack}>Back</button>

或者

<button onClick={() => history.goBack()}>Back</button>

我认为你只需要通过像这样初始化它来在你的路由器上启用 BrowserHistory : <Router history={new BrowserHistory}>。

在此之前，您应该要求BrowserHistory从'react-router/lib/BrowserHistory'

我希望有帮助！

更新：ES6 中的示例

const BrowserHistory = require('react-router/lib/BrowserHistory').default;

const App = React.createClass({
    render: () => {
        return (
            <div><button onClick={BrowserHistory.goBack}>Go Back</button></div>
        );
    }
});

React.render((
    <Router history={BrowserHistory}>
        <Route path="/" component={App} />
    </Router>
), document.body);

1. 进口 withRouter

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

2. 将您的组件导出为：

   export withRouter(nameofcomponent) 
   

3. 例如，单击按钮时，调用goBack：

   <button onClick={this.props.history.goBack}>Back</button>
   

在react-router-domv4.3 上测试

this.context.router.goBack()

无需导航混合！