Objeto history en React Router

1. Historial del router React
2. Historial del enrutador de React para redireccionamientos
3. history.push() en React Router V4

La navegación es una parte esencial de cualquier aplicación moderna. Los marcos basados ​​en JavaScript generalmente se basan en el objeto history por defecto para ser la base para sus diferentes soluciones de navegación. Este objeto está disponible como propiedad del objeto Ventana del DOM.

Al desarrollar aplicaciones en React, los desarrolladores pueden usar la biblioteca React Router. Proporciona todas las funcionalidades de navegación, incluido un paquete history, una versión mejorada de la interfaz del historial del navegador. El objeto history de React Router incluye muchas propiedades y métodos que podemos utilizar para configurar la navegación, como action, location, .push() o .replace(). Revisaremos cómo utilizar mejor estas propiedades y métodos para manejar las necesidades clave de navegación en las secciones siguientes.

Historial del router React

El paquete history (o simplemente history para abreviar) es la herramienta clave necesaria para administrar el historial de sesiones en JS. Como se mencionó anteriormente, incluye muchos métodos, todos los cuales son útiles a su manera. Aún así, el método history.push() es posiblemente el más importante y será el enfoque principal de nuestra guía.

Pila de historia

Los navegadores realizan un seguimiento de las diferentes URL visitadas por los usuarios. Este historial de sesión se denomina pila de historial y es necesario para que funcionen los botones de avance o retroceso de los navegadores.

Los objetos de historial tienen propiedades y métodos que pueden afectar una pila de historial. Por ejemplo, el método .replace() reemplaza la ruta más reciente en la pila del historial. La propiedad .length nos da el número de entradas en la pila.

El método .push() es probablemente el más importante y ampliamente utilizado. Los desarrolladores lo utilizan para insertar una entrada en la pila y redirigir a los usuarios a otra página. Este método es esencial y lo discutiremos en detalle en partes posteriores de la guía.

location

El objeto de ubicación muestra la información sobre el nombre de ruta actual (y a veces pasado) de la aplicación. React Router hace que este objeto esté disponible varias veces. Por ejemplo, se puede acceder a él en el componente PATH como una propiedad del objeto props. Obtenga más información en la documentación oficial de React Router.

El objeto history también tiene la propiedad location. Sin embargo, el objeto history es mutable, por lo que no se recomienda utilizar el valor de la propiedad location. En su lugar, puede acceder a la location a través de los props de <Route>. De esta manera, puede estar seguro de que está accediendo a la información de location correcta.

Historial del enrutador de React para redireccionamientos

Al desarrollar una aplicación, a menudo es necesario cambiar la ruta del usuario después de que realiza una acción. Para hacer esto, necesita configurar un controlador de eventos y usar el método .push() para redirigir a un nombre de ruta específico.

history.push() en React Router V5

Desde la introducción de los ganchos, los componentes funcionales se han vuelto mucho más útiles. Con el lanzamiento de v5, react-router-dom también comenzó a proporcionar un gancho useHistory() para acceder al objeto del historial más fácilmente. Veamos un ejemplo práctico:

import { useHistory } from "react-router-dom";
function Homepage() {
  let historyObj = useHistory();
  function handleClick() {
    historyObj.push("/");
  }
  return (
    <div>
    ...
    <button onClick={() => handleClick()}>
      Go to Homepage
    </button>
    ...
    </div>
  );
}

En este ejemplo, tenemos un simple componente Homepage. Primero, importamos el gancho useHistory del paquete react-router-dom. Debe instalar la versión 5 de react-router-dom (o superior) para que esto funcione. El gancho devuelve el objeto history del componente, almacenado en la variable historyObj.

Podemos utilizar el método antes mencionado .push(string) en la función del manejador, que acepta un argumento de cadena. Este método empuja la cadena a la pila del historial y lleva al usuario a la ruta especificada.

history.push() en React Router V4

La versión 4 de React Router no incluye un gancho useHistory, por lo que tendrá que pasar el objeto history a través de props. Esta es también la única forma de acceder al history en los componentes de clase, que no son compatibles con los ganchos.

Puede navegar a otra ruta utilizando un método .push() en la función del controlador. Echemos un vistazo a este ejemplo:

function handleClick() {
  this.props.history.push('/')
}

Para acceder al objeto history a través de props, debe asegurarse de que su componente tenga acceso a él. Hay dos formas de hacerlo.

1. Utilice el atributo component en <Route> para vincularlo con un componente específico. Por ejemplo:

<Route path="/" component={Homepage} />

En este caso, el componente Homepage tendrá acceso al objeto history a través de props.

2. Utilice el atributo render para definir una función. Proporcione props y use la siguiente sintaxis:

<Route path="/" render={(props) => <Homepage {...props} />}/>