Navegar programáticamente usando React Router

En esta guía, aprenda cómo crear rutas, navegar programáticamente, enviar y recibir datos utilizando React Router en JavaScript, con ejemplos prácticos.

Introducción

Las páginas de los sitios web modernos, y especialmente las aplicaciones de una sola página (SPA), no siguen el método tradicional de cargar nuevas páginas por completo cada vez que algo cambia en ellas. En su lugar, se usa Enrutamiento del lado del cliente: para enrutar hacia los recursos para cargar otra parte del programa o cambiar estructuralmente la vista completa de la aplicación si es necesario, cuando una acción (como hacer clic en un botón o enlace) es interpretado.

React es una biblioteca muy popular para el desarrollo front-end que se utiliza para crear interfaces de usuario altamente receptivas y, naturalmente, tiene su propio Router, que realiza el enrutamiento del lado del cliente: el react-router-dom.

En esta guía, veremos cómo crear rutas en una aplicación React, navegar programáticamente entre rutas, así como enviar y recuperar datos entre ellas, utilizando React Router.

Creación de una aplicación React

Comencemos creando una aplicación React simple a través de la línea de comando:

1
$ npx create-react-app router-sample

Una vez creado, vayamos al directorio del proyecto e iniciemos la aplicación:

1
2
$ cd router-sample
$ npm start

Esto iniciará un servidor en localhost:3000 y su navegador predeterminado se iniciará para servir la aplicación. Antes de crear cualquier archivo nuevo para servir en este punto final, instalemos react-router-dom, ya que no viene preempaquetado.

Instalación del enrutador React

Como de costumbre, instalar un paquete usando npm es tan simple como ejecutar un solo comando:

1
$ npm install react-router-dom

Creando nuevas rutas con React Router

El paquete react-router-dom simplifica la creación de nuevas rutas. Para comenzar, envuelve toda la aplicación con la etiqueta <BrowserRouter>. Hacemos esto para obtener acceso al objeto historial del navegador. Luego, define los enlaces de su enrutador, así como los componentes que se utilizarán para cada ruta.

Para demostrar esto, vamos a crear un nuevo archivo llamado About.js en la carpeta /src:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const About = () => {
  return (
    <div>
      <h1>About page here!</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, modi!
      </p>
    </div>
  );
};

export default About;

Ahora, actualicemos la página src/index.js e importemos About desde el archivo que acabamos de crear. Dentro de la etiqueta <BrowserRouter>, definiremos nuestras rutas y los componentes asociados con ellas:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { render } from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import About from "./About";

render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="about" element={<About />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

Hemos importado <BrowserRouter> aquí, y hemos envuelto toda nuestra aplicación a su alrededor. También seleccionamos App.js como el componente para nuestra página de inicio (bajo el punto final /) y About.js como el componente para la página /about.

Finalmente, adaptemos el archivo App.js, que, nuevamente, será el principal punto de entrada para la aplicación y servirá para nuestra página de inicio:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { Link } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <h1>Welcome to my react app!</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus,
        pariatur?
      </p>
      <br />
      <Link to="/about">About Page</Link>
    </div>
  );
}

export default App;

En esta etapa, hemos creado dos rutas: la ruta de entrada (/) y la ruta /acerca de, y deberíamos poder navegar fácilmente desde la página de inicio a la página acerca de cuando visitemos nuestra aplicación:

navigating between pages with react

React Router Hooks (métodos de navegación)

Recientemente se agregaron ganchos a React, que son funciones que le permiten "enganchar" al estado de la aplicación, sin tener que escribir nuevas clases. El enrutador React viene con algunos enlaces que nos permiten acceder mediante programación al estado del enrutador y navegar entre los componentes. Entre estos se encuentran los siguientes ganchos:

  • usarHistorial()
  • usuarioNavegar()
  • usarUbicación()
  • usarParams()

Para usar cualquiera de estos ganchos, primero debemos importarlos desde el paquete react-router-dom y luego especificar una variable que invoque el gancho; analizaremos esto con más detalle en las secciones siguientes.

usarHistorial()

{.icon aria-hidden=“true”}

Nota: El gancho useHistory() ha quedado obsoleto en la última versión de React Router. Si estás usando React Router V6, querrás usar el gancho useNavigate() en su lugar. Está cubierto justo después de useHistory().

El gancho useHistory() brinda acceso directo a las instancias del historial de React Router, lo que nos permite realizar acciones como recuperar la cantidad de entradas en la pila del historial, agregar, modificar o eliminar una entrada de la pila, etc. .

Algunos de los métodos más útiles aquí incluyen:

  • goBack() - Ir hacia atrás en la historia.
  • goForward() - Avanzar en el historial.
  • push() - Agrega una nueva entrada a la pila de historial, es decir, navega a una nueva URL.
  • replace() - Similar a push() en que reemplaza la pila actual en el historial, pero a diferencia de push(), el usuario no puede retroceder en el historial, es decir, hacer clic en el botón Atrás del navegador no regresará al estado anterior.

Con solo esto, podemos navegar desde nuestra página ‘Acerca de’ a la página de inicio programáticamente, al ’empujar ()’ una nueva entrada en el historial, navegando efectivamente al usuario a la nueva entrada:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from "react";
import { useHistory } from "react-router-dom";

const About = () => {
  let history = useHistory();

  const goHome = () => {
    history.push("/");
  };

  return (
    <div>
      <h1>About page here!</h1
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, modi!
      </p>
      <button onClick={goHome}>Go to home page</button>
    </div>
  );
};

export default About;

Aquí, solo importamos el gancho useHistory() y creamos una nueva función goHome() que se ejecuta al hacer clic en un botón. Es solo un envoltorio para una llamada push().

También podemos transferir el estado o enviar datos arbitrarios a la ruta por la que estamos navegando. Podemos hacer esto enviando un objeto a los métodos push en lugar del nombre de la ruta como una cadena y agregando nuestro estado a un objeto distinto:

1
2
3
4
5
6
7
history.push({
  pathname: '/blog,
  search: '?blogId=12,  // Query string
  state: {              // Location state
    author_name: "John Doe", 
  },
}); 

Después de cubrir useNavigate(), veremos cómo acceder a estos datos usando los ganchos useLocation() y useParams().

usarNavegar()

Si está utilizando la versión más reciente de React Router, el enlace useHistory() ha quedado obsoleto en favor de useNavigate(). El enfoque es casi idéntico; la principal diferencia es que el gancho useNavigate() no acepta métodos como .push() o .replace(). Simplemente navega() a una determinada entrada:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React from "react";
import { useNavigate } from "react-router-dom";

const About = () => {
  let navigate = useNavigate();

  const goHome = () => {
    navigate("/");
  };

  return (
    <div>
      <h1>About page here!</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, modi!
      </p>
      <button onClick={goHome}>Go to home page</button>
    </div>
  );
};

export default About;

Y, por supuesto, este método también nos permite transferir estados entre rutas:

1
navigate("/blog", { state: { author_name: "John Doe" } });

Recuperación de datos entre rutas con useLocation() y useParams() {#retrievingdata betweenrouteswithuselocationanduseparams}

El gancho useLocation() nos proporciona acceso al objeto ubicación del navegador. Considéralo el gancho encargado de obtener la información necesaria sobre la ruta actual:

1
2
3
4
import { useNavigate, useLocation } from "react-router-dom";
/*...*/
let location = useLocation();
console.log(location);

Ejecutar el código anterior debería devolver toda la información sobre la ruta actual, como se muestra a continuación:

1
2
3
4
5
6
7
{
  "pathname": "/about",
  "search": "",
  "hash": "",
  "state": null,
  "key": "default"
}

Es razonable pensar en el gancho useLocation() como un gancho useState() que actualiza el estado a una nueva ubicación cada vez que cambia la URL. Por otro lado, el gancho userParams() se puede usar para obtener el valor de los parámetros de URL. Cuando se llama, useParams() proporciona un objeto que asigna los nombres de los parámetros de URL a sus valores en la URL actual.

Por ejemplo, en la configuración de nuestro enrutador, digamos que hemos tenido una ruta dinámica:

1
2
3
<Route path="/about/:user_id">
 <About />
</Route>

Y en otra página, tenemos un componente de enlace que apunta a cierta información relacionada con el Usuario 2:

1
<Link to="/about/2">About User 2</Link>

Cuando se pasan parámetros, como hemos visto antes, podemos acceder a los parámetros a través del gancho userParams():

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import { useParams } from "react-router-dom";

const About = () => {
  const { user_id } = useParams();

  return (
    <div>
      <h1>About user {user_id}</h1>
      <p>
        Lorem ipsum dolor...
      </p>
    </div>
  );
};

export default About;

Conclusión

React Router se utiliza para Enrutamiento del lado del cliente de recursos. En esta guía, hemos echado un vistazo rápido a cómo puede navegar mediante programación una aplicación usando React Router, así como también cómo transferir estados entre rutas cuando lo hace.