Volver a la página anterior usando React Router

React es la biblioteca front-end más utilizada en la actualidad. No podemos llamarlo marco porque no tiene navegación y otras características esenciales; por lo tanto, los desarrolladores de React suelen importar bibliotecas externas como react-router para implementar funciones de navegación.

Este artículo tiene como objetivo ayudarlo a implementar funciones de navegación esenciales en React, específicamente, cómo indicarle a React Router que regrese a la página anterior.

Volver a la página anterior usando React Router

Cualquiera con experiencia en navegar por Internet entiende cuán esencial es la función de regreso. Es una buena práctica de UX implementar una función dentro de su aplicación React que permita a sus usuarios navegar de regreso a la página o URL anterior.

Pila de historial

Los navegadores de Internet mantienen un registro de sus acciones. La pila de historial es una colección de sus pasos mientras navega por el sitio web.

La pila de historial es una característica del navegador, pero la biblioteca react-router también almacena esta información en el objeto historia. Puede trabajar con este objeto para ayudar a los usuarios a navegar sin problemas por su aplicación.

Volver a la página anterior usando React Router v4 y v5

En las versiones anteriores de la biblioteca react-router, usábamos el enlace useHistory() para navegar a una página específica. Proporciona acceso a la instancia del objeto historia.

Puede utilizar los métodos .push(), .pop() y .replace() para cambiar la URL según sea necesario. La instancia history tiene un método goBack(), que nos permite navegar a la página anterior.

Echemos un vistazo al ejemplo:

function NavigateHome() {
  let history = useHistory();
  function handleClick() {
    history.push("/somePage");
  }
  function goBack() {
    history.goBack();
  }
    return (
    <div>
    <button onClick={handleClick}>
       Go to some page
    </button>
    <button onClick={goBack}>
       Go back
    </button>
    </div>

  );
}

En este ejemplo, siempre que un usuario haga clic en el primer botón, react-router llevará al usuario a la URL pasada como argumento al método push(). Sin embargo, si el usuario hace clic en el segundo botón, volverá a la página anterior.

Volver a la página anterior usando React Router v6

La versión más reciente de la biblioteca React Router ya no es compatible con el enlace useHistory(). Los desarrolladores de la biblioteca recomiendan usar el enlace useNavigate() en su lugar.

A diferencia del historial, la API navegar no requiere que utilice .push() y otros métodos de JavaScript. Toma el argumento en sí mismo.

Además, en lugar de usar el método .goBack(), debe cambiar el argumento a la instancia navegar. Todo lo que necesita hacer es llamar a navegar con -1 como argumento.

El ejemplo de arriba se puede reescribir con React Router v6, que usa la API navegar:

import { useNavigate, Link, BrowserRouter as Router } from "react-router-dom";
export default function App() {
  let navigate = useNavigate();
  let goToAnotherPage = () => {
    navigate("/another");
  };
  let goToSomePage = () => {
    navigate("/somepage");
  };
  let goBack = () => {
    navigate(-1);
  };
  return (
    <div className="App">
      <span
        onClick={goToAnotherPage}
        style={{ backgroundColor: "yellow", fontSize: 33, padding: 5 }}
      >
        Go To Another Page
      </span>
      <br />
      <span
        onClick={goToSomePage}
        style={{ backgroundColor: "yellow", fontSize: 33, padding: 5 }}
      >
        Go To Some Page
      </span>
      <br />
      <span
        onClick={goBack}
        style={{ backgroundColor: "lightblue", fontSize: 33, padding: 5 }}
      >
        Go Back
      </span>
    </div>
  );
}

En este ejemplo, tenemos tres botones. Los dos primeros llevan a los usuarios a una URL específica y el tercero los devuelve a la ubicación anterior.

Usamos la API navegar para hacerlo; navegar es una función que acepta la URL de destino como argumento. Si proporciona -1 como argumento, volverá a la página anterior.

Puedes jugar con el código en CodeSandbox.