React Router es una librería fundamental cuando estamos creando la navegación de nuestras aplicaciones React. Con ella, podemos crear, redirigir y anidar rutas para tener una navegación dinámica en nuestros proyectos. Por ello, en este post te enseñaremos el paso a paso de cómo aplicar React Router a una aplicación React.
Un poco de contexto
Antes de enseñarte cómo aplicar React Router a una aplicación React, te invitamos a leer un poco sobre esta librería. Para ello, puedes leer la documentación oficial en la página reactrouter.com. Además, puedes leer nuestros posts sobre qué es React Router y componentes principales de React Router.
En este último post te hemos enseñado que hay cinco componentes principales en esta librería. Con ellos podemos crear enlaces y redirecciones, al igual que renderizar nuestros componentes según la URL actual de nuestra aplicación. A continuación, te hacemos un breve resumen de estos componentes.
- BrowserRouter: envuelve toda la aplicación usando la API de HTML history.
- Link, NavLink: componentes que nos permiten crear enlaces para la navegación declarativa.
- Navigate: componente que produce una redirección declarativa.
- Route: nos permite renderizar un componente cuando hace match con la URL actual. Si no hay un match, este componente renderiza un null.
- Routes, Outlet: mientras que Routes permite renderizar el componente route que mejor coincide, Outlet permite anidar rutas que se renderizan en una etiqueta Outlet.
Ahora que sabes qué son y cómo funcionan los componentes principales de esta librería, te enseñaremos cómo utilizarlos para aplicar React Router a una aplicación React.
¿Cómo aplicar React Router a una aplicación React?
Para aplicar React Router a una aplicación React podemos utilizar un ejemplo básico. A continuación, te presentaremos las líneas de código de una aplicación React muy simple, con una página de inicio home y una página sobre la empresa about.
Ten presente que las siguientes líneas de código usan la versión 6 de React Router. Si no estás acostumbrado al componente Routes y te hace falta el componente Switch es porque estás en la versión 5. La diferencia entre estos dos componentes es que en Switch podíamos renderizar lo que quisiéramos, mientras que con Routes siempre debemos renderizar como hijos directos al componente Route.
import React from ‘react’;
import { BrowserRouter as Router, Routes, Route, Link } from ‘react-router-dom’;
export default function App ( ) {
return (
<Router>
<div>
<ul>
<li>
<Link to = «/»>Home</Link>
</li>
</ul>
<Routes>
<Route path =»/» element = {<Home />}/>
<Route path =»/about» element = {<About />}/>
</Routes>
</div>
</Router>
);
}
Como puedes ver en las líneas de código anteriores, lo primero que debes hacer es importar el componente BrowserRouter de la librería ‘react-router-dom’. Esta librería se especializa en las aplicaciones web creadas con React DOM. Nota que nosotros hemos importado este componente con el nombre Router para mayor facilidad. Con este componente envolvemos todo lo que queramos que tenga acceso al enrutado en nuestra aplicación. Es decir, lo que pongamos fuera de Router está fuera de la navegación.
Si tienes abierto tu navegador con la herramienta React Developper Tools, verás que envolver nuestra aplicación de esta manera nos inserta una serie de elementos antes de nuestro componente App, o como hayas llamado al componente que renderiza tus páginas.
Después de envolver tu aplicación con Router, el siguiente paso es declarar rutas. Para ello, deberás definir una zona donde vas a declarar rutas. En nuestro ejemplo, esto sucede justo después del elemento <ul>. Para declarar esta zona, utilizamos el componente Routes. Dentro de él es que declararemos cada ruta con la ayuda del componente Route. Como ves en nuestro ejemplo, podemos usar las palabras clave path y element para asociar enlaces a componentes específicos. Esto hará que, por ejemplo, el componente About se renderice cuando el path termine con «/about». Para conocer más sobre este proceso, te recomendamos leer nuestro post sobre declarar rutas con React Router.
¿Cuál es el siguiente paso?
Ahora que sabes cómo aplicar React Router a una aplicación React, ¡te invitamos a usar este artículo para desarrollar la navegación de tus propios proyectos! KeepCoding te acompaña en todo el proceso de creación de un proyecto. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensivo donde aprenderás la teoría y práctica para desarrollar con herramientas como JavaScript, React, CSS y HTML. ¿A qué esperas para dar el siguiente paso en tu aprendizaje y convertirte en un experto del desarrollo web? ¡Anímate a matricularte y cambia tu vida!
