返回指定页面:

  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()
  };

我认为你只需要在路由器上启用BrowserHistory，初始化如下:< router history={new BrowserHistory}>。

在此之前，你应该从'react-router/lib/BrowserHistory'中获取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);

像这样调用下面的组件:

<BackButton history={this.props.history} />

这是组件:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
class BackButton extends Component {
  constructor() {
    super(...arguments)

    this.goBack = this.goBack.bind(this)
  }

  render() {
    return (
      <button
        onClick={this.goBack}>
          Back
      </button>
    )
  }

  goBack() {
    this.props.history.goBack()
  }
}

BackButton.propTypes = {
  history: PropTypes.object,
}

export default BackButton

我用的是:

"react": "15.6.1"
"react-router": "4.2.0"

更新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路由器使用HTML5 History API，它建立在浏览器历史API的基础上，提供了一个我们可以在React应用程序中轻松使用的接口。历史API。所以不需要导入任何东西(useHistory等)

对于功能组件:

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

对于类组件:

<button onClick={()=>{ this.window.history.back() }}> Back </button>

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

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

Tks, IamMHussain