Declarar rutas con React Router

Autor: | Última modificación: 21 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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 y Route al archivo en el que quieras definir las 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 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 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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!