更新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(使用后退按钮)。坦白地说，我认为这是反应路由器的一个bug。问题创建在这里:https://github.com/rackt/react-router/issues/1874

像这样简单地使用

<span onClick={() => this.props.history.goBack()}>Back</span>

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

this.props.history.goBack();

我正在使用这些版本

"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",

对于react-router v2。这已经改变了。以下是我为ES6所做的:

import React from 'react';
import FontAwesome from 'react-fontawesome';
import { Router, RouterContext, Link, browserHistory } from 'react-router';

export default class Header extends React.Component {

  render() {
    return (
      <div id="header">
        <div className="header-left">
          {
            this.props.hasBackButton &&
            <FontAwesome name="angle-left" className="back-button" onClick={this.context.router.goBack} />
          }
        </div>
        <div>{this.props.title}</div>
      </div>
    )
  }
}

Header.contextTypes = {
  router: React.PropTypes.object
};

Header.defaultProps = {
  hasBackButton: true
};

Header.propTypes = {
  title: React.PropTypes.string
};

根据https://reacttraining.com/react-router/web/api/history

对于“react-router-dom”:“^5.1.2”，，

const { history } = this.props;
<Button onClick={history.goBack}>
  Back
</Button>

YourComponent.propTypes = {
  history: PropTypes.shape({
    goBack: PropTypes.func.isRequired,
  }).isRequired,
};

在react-router-dom v6上

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

function goBack() {
  const navigate = useNavigate();

  return <button onClick={() => navigate(-1)}>go back</button>
}