Introducción

Páginas en sitios web modernos, y especialmente Aplicaciones de una sola página (SPA) no siga el método tradicional de cargar nuevas páginas por completo cada vez que algo cambia en ellas. Enrutamiento del lado del cliente se usa en su lugar: 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 se realiza una acción (como hacer clic en un botón o enlace).

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 propia 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 de reacción

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

$ npx create-react-app router-sample

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

$ cd router-sample
$ npm start

Esto iniciará un servidor en localhost:3000 y su navegador predeterminado se activará 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 preenvasado.

Instalación del enrutador React

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

$ npm install react-router-dom

Creación de nuevas rutas con React Router

La react-router-dom El paquete simplifica la creación de nuevas rutas. Para comenzar, envuelve toda la aplicación con el <BrowserRouter> etiqueta. Hacemos esto para obtener acceso a los navegadores history objeto. 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 existentes /src carpeta:

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, actualice el src/index.js página e importación About del archivo que acabamos de crear. Dentro de <BrowserRouter> etiqueta, definiremos nuestras rutas y componentes asociados a ellas:

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 el <BrowserRouter> aquí, y habíamos envuelto toda nuestra aplicación a su alrededor. También habíamos seleccionado App.js como el componente de nuestra página de inicio (bajo el / punto final), y About.js como componente para el /about .

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

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 el /about ruta, y deberíamos poder navegar fácilmente desde la página de inicio a la página acerca de cuando visitamos nuestra aplicación:

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

Manos se agregaron a React recientemente, que son funciones que le permiten "engancharse" 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:

• useHistory()
• userNavigate()
• useLocation()
• useParams()

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

usarHistorial()

La useHistory() hook proporciona 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 la historia.
• push() – Agregue una nueva entrada a la pila de historial, es decir, navegue a una nueva URL.
• replace() - Similar a push() en que reemplaza la pila actual en la historia, pero a diferencia push(), el usuario no puede retroceder en el historial, es decir, al hacer clic en el botón Atrás del navegador no se volverá al estado anterior.

Con solo esto, podemos navegar desde nuestro About página a la página de inicio mediante programación, por push()ing una nueva entrada en el historial, navegando efectivamente al usuario a la nueva entrada:

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 useHistory() enganche y cree un nuevo goHome() función que se ejecuta al hacer clic en un botón. Es solo un envoltorio para un push() llamada.

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:

history.push({ pathname: '/blog, search: '?blogId=12, state: { author_name: "John Doe", },
}); 

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

usarNavegar()

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

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:

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

Recuperación de datos entre rutas con usarUbicación() y usarParams()

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

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:

{ "pathname": "/about", "search": "", "hash": "", "state": null, "key": "default"
}

Es razonable pensar en el useLocation() gancho como un useState() gancho que actualiza el estado a una nueva ubicación cada vez que cambia la URL. Por otro lado, el userParams() gancho se puede utilizar 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:

<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 2 usuario:

<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 userParams() gancho:

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 por una aplicación mediante programación utilizando React Router y cómo transferir estados entre rutas cuando lo hace.