唯一对我有效的解决办法是最简单的。不需要额外的导入。

<a href="#" onClick={() => this.props.history.goBack()}>Back</a>

Tks, IamMHussain

看看我使用React 16.0和React-router v4的工作示例。查看代码Github

使用withRouter和history.goBack()

这就是我正在实现的想法……

History.js

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import './App.css'


class History extends Component {

  handleBack = () => {
    this.props.history.goBack()
  }

  handleForward = () => {
    console.log(this.props.history)
    this.props.history.go(+1)
  }

  render() {
    return <div className="container">
      <div className="row d-flex justify-content-between">
        <span onClick={this.handleBack} className="d-flex justify-content-start button">
          <i className="fas fa-arrow-alt-circle-left fa-5x"></i>
        </span>
        <span onClick={this.handleForward} className="d-flex justify-content-end button">
          <i className="fas fa-arrow-alt-circle-right fa-5x"></i>
        </span>
      </div>
    </div>
  }
}

export default withRouter(History)

PageOne.js

import React, { Fragment, Component } from 'react'

class PageOne extends Component {

   componentDidMount(){
      if(this.props.location.state && this.props.location.state.from != '/pageone')
      this.props.history.push({
         pathname: '/pageone',
         state: { 
             from: this.props.location.pathname
         }
       });
   }

   render() {
      return (
         <Fragment>
            <div className="container-fluid">
               <div className="row d-flex justify-content-center">
                  <h2>Page One</h2>
               </div>
            </div>
         </Fragment>
      )
   }
}

export default PageOne

另外，抱歉代码太大，不能全部贴在这里

更新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

在react-router v6中，当你想返回到前一页时，你可以使用useNavigate:

步骤1:

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

步骤2:

const navigate = useNavigate();

第三步:如果你想回到前一页，使用navigate(-1):

<button onClick={() => navigate(-1)}> Back </button>

返回指定页面:

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

  const history = useHistory();
  
  const routeChange = () => {
    let path = '/login';
    history.push(path);
  };

返回上一页:

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

  const history = useHistory();
  
  const routeChange = () => {
    history.goBack()
  };

这是一个工作的BackButton组件(React 0.14):

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

var History = Router.History;

var BackButton = React.createClass({
  mixins: [ History ],
  render: function() {
    return (
      <button className="back" onClick={this.history.goBack}>{this.props.children}</button>
    );
  }
});

module.exports = BackButton;

如果没有历史记录，你当然可以这样做:

<button className="back" onClick={goBack}>{this.props.children}</button>

function goBack(e) {
  if (/* no history */) {
    e.preventDefault();
  } else {
    this.history.goBack();
  }
}