reaccionar-router retroceder una página ¿cómo se configura el historial?

¿Alguien puede decirme cómo puedo volver a la página anterior en lugar de a una ruta específica?

Al usar este código:

var BackButton = React.createClass({

 mixins: [Router.Navigation],
  render: function() {
    return (
        <button
            className="button icon-left"
            onClick={this.navigateBack}>
            Back
        </button>
    );
  },

  navigateBack: function(){
    this.goBack();
  }
});

Recibe este error, se ignoró goBack() porque no hay historial del enrutador

Aquí están mis rutas:

// Routing Components
Route = Router.Route;
RouteHandler = Router.RouteHandler;
DefaultRoute = Router.DefaultRoute;

var routes = (
 <Route name="app" path="/" handler={OurSchoolsApp}>
     <DefaultRoute name="home" handler={HomePage} />
     <Route name="add-school" handler={AddSchoolPage}  />
     <Route name="calendar" handler={CalendarPage}  />
     <Route name="calendar-detail" path="calendar-detail/:id" handler={CalendarDetailPage} />
     <Route name="info-detail" path="info-detail/:id" handler={InfoDetailPage} />
     <Route name="info" handler={InfoPage} />
     <Route name="news" handler={NewsListPage} />
     <Route name="news-detail" path="news-detail/:id" handler={NewsDetailPage} />
     <Route name="contacts" handler={ContactPage} />
     <Route name="contact-detail" handler={ContactDetailPage} />
     <Route name="settings" handler={SettingsPage} />
 </Route>
 );

 Router.run(routes, function(Handler){
   var mountNode = document.getElementById('app');
   React.render(<Handler /> , mountNode);
 });

Jun 18 '15 19:06 Bomber

Actualización con React v16 y ReactRouter v4.2.0 (octubre de 2017):

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

Actualización con React v15 y ReactRouter v3.0.0 (agosto de 2016):

var browserHistory = ReactRouter.browserHistory;

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

Creé un violín con un ejemplo un poco más complejo con un iframe integrado: https://jsfiddle.net/kwg1da3a/

React v14 y ReacRouter v1.0.0 (10 de septiembre de 2015)

Puedes hacerlo:

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);
    }
  },
  ...

Debes tener cuidado de tener el historial necesario para volver atrás. Si accede a la página directamente y luego vuelve a presionar, volverá al historial del navegador antes de su aplicación.

Esta solución se encargará de ambos escenarios. Sin embargo, no manejará un iframe que pueda navegar dentro de la página (y agregarlo al historial del navegador) con el botón Atrás. Francamente, creo que es un error en el enrutador de reacción. Problema creado aquí: https://github.com/rackt/react-router/issues/1874

Sep 10 '2015 19:09 mlunoe

Reaccionar enrutador v6

useNavigateHook es la forma recomendada de regresar ahora:

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

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

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

Muestra de Codesandbox (enlace roto)

Retroceder/avanzar múltiples entradas de la pila del historial:

<button onClick={() => navigate(-2)}>go two back</button>
<button onClick={() => navigate(2)}>go two forward</button>

Ir a ruta específica:

navigate("users") // go to users route, like history.push
navigate("users", { replace: true }) // go to users route, like history.replace
navigate("users", { state }) // go to users route, pass some state in

useNavigate se reemplaza useHistory para admitir mejor el próximo modo React Suspense/Concurrent.

Jun 12 '2020 09:06 ford04

1. importarwithRouter

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

2. Exporte su componente como:

   export withRouter(nameofcomponent) 
   

3. Ejemplo, al hacer clic en el botón, llame a goBack:

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

Probado en react-router-domv4.3

Mar 06 '2018 11:03 gaurav makwana