Declarar rutas con React Router es una parte fundamental de la creación de navegación en una aplicación. Este proceso nos permite asociar y crear las distintas URL con los componentes importantes de nuestra aplicación. En este post, te enseñaremos cómo declarar rutas con React Router para que puedas controlar la navegación de tus proyectos.
Antes de empezar
Antes de declarar rutas con React Router, deberás instalar la librería que necesites para trabajar. Al igual que sucede en React, React Router tiene tres librerías disponibles: react-router, react-router-dom y react-router-native. Si quieres conocer más sobre sus diferencias y cómo instalarlas, te invitamos a leer nuestro post sobre qué es React Router.
Después de instalar la librería apropiada, deberás importar los componentes routes en react y Route al archivo en el que quieras definir las react rutas de tu aplicación. Estos dos componentes forman parte de los componentes principales de React Router. Para ello, inserta la siguiente línea de código, con las que llamarás a la librería react-router-dom que puedes instalar siguiendo los pasos de reactrouter.com. Nosotros instalamos esta librería porque estamos ejecutando una aplicación web. Una vez instalada, no hace falta instalar react-router.
import {Routes, Route} from ‘react-router-dom’
Aunque esto es muy personal y no afectará a tu código, te sugerimos poner los import de librerías al inicio de tu archivo y, luego, los import de los distintos componentes que has creado. Esto te ayudará a distinguir qué estás importando en cada sección de líneas de código.
Una vez instalada la librería e importados los componentes necesarios, nos iremos al componente en el que renderizamos nuestra aplicación.
¿Cómo declarar rutas con React Router?
Para declarar rutas con React Router, lo primero que debemos hacer es definir la zona en donde vamos a ejecutar esta acción. Para ello, utilizamos el componente Routes. Dentro de este componente, podemos declarar todas las rutas react que queramos usando el componente Route para cada ruta. Ten presente que el hijo directo de un componente Routes siempre debe ser Route. Esto es algo nuevo, introducido en la versión 6 de React Router.
Cada una de las rutas en react declaradas debe tener dos partes: un path en el que definimos la ruta o URL y un element con el que definimos qué componente vamos a renderizar. A continuación, te mostramos un ejemplo:
<Routes>
<Route path=«/» element={<Home/>}/>
<Route path=«/about» element={<About/>}/>
</Routes>
En las líneas de código anteriores, envolvemos las rutas de nuestra aplicación por el componente Routes. Como ves, cada ruta tiene un path y un element. Esto quiere decir que, cuando la ruta sea «/», se renderiza el elemento <Home/>. De igual manera, cuando la ruta sea «/about», se renderiza el elemento <About/>. De este modo, vamos a ir asociando cada una de las URL de nuestra aplicación con un elemento a renderizar.
Ten en cuenta que, cuando insertamos un valor en la clave element, no estamos pasando el componente de React, sino el elemento JSX directamente.
Ahora, supongamos que tenemos un proyecto en el que estamos simulando la aplicación Twitter. Allí, tenemos dos páginas: una página de login, que hemos creado en nuestro post sobre crear una página de login en React, y una página de tweets, que hemos creado en nuestro post sobre crear una página listado en React. Entonces, para declarar rutas con React Router que sirvan para este proyecto, podemos insertar las siguientes líneas de código. Esto lo haremos en el componente App.js, en donde estamos renderizando todos nuestros proyectos.
<Routes>
<Route path =»/login» element={<LoginPage onLogin={handleLogin} />}/>
<Route path =»/tweets» element={<TweetsPage isLogged={isLogged} onLogout={handleLogout} />}/>
</Routes>
Nota que en cada una de las rutas declaradas también hemos pasado las props que necesitamos en cada componente. Estas propiedades no se eliminan por estar envueltas en el componente Route.
¿Qué sigue?
Ahora que sabes cómo declarar rutas con React Router, ¡es el momento de utilizar esta herramienta para controlar la navegación de tus proyectos! Si, además, quieres aprender a desarrollar todo tipo de proyectos de programación para la web, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp. En este programa de formación intensiva, aprenderás a desarrollar con lenguajes de programación como JavaScript, HTML, CSS y JSX. ¿A qué esperas para cumplir tu sueño de ser un experto del desarrollo web? ¡Inscríbete ya y cambia tu vida!
