Anidar rutas con React Router

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

React Router es una librería que nos permite crear una navegación dinámica en nuestras aplicaciones React. Gracias a los distintos componentes y hooks que nos pone a disposición esta herramienta, podemos ejecutar diversas acciones. Desde crear rutas, agruparlas y redirigirlas, hasta anidarlas para simplificar nuestro código. En este post, te enseñaremos cómo anidar rutas con React Router, una de las nuevas acciones que podemos ejecutar en esta librería.

¿Qué es anidar rutas con React Router?

Anidar rutas con React Router es una de las acciones que podemos ejecutar en la nueva versión de esta librería. Esta acción consiste en agrupar una serie de rutas que empiezan con la misma URL para simplificar nuestro código. Entonces, por ejemplo, podemos anidar rutas con React Router que se despeguen de la misma página de nuestra aplicación. A continuación, te explicamos esto con un ejemplo.

¿Cómo anidar rutas con React Router?

Para enseñarte cómo anidar rutas con React Router, te pondremos un ejemplo. Supongamos que tenemos las siguientes líneas de código con las rutas de nuestra aplicación definidas. Allí podrás encontrar varias rutas, entre las que encontramos rutas redirigidas y rutas de error. Para conocer cómo ejecutar las distintas rutas, a continuación te recomendamos leer nuestros posts sobre declarar rutas con React Router, redirigir una ruta con React Router y crear una ruta 404 con React Router.

<div className =»App»>

<AuthContextProvider value= {{ isLogged, handleLogin, handleLogout }}>

<Routes>

<Route path=«/login» element={<LoginPage/>} />

<Route path=«/tweets» element={<TweetsPage/>} />

<Route path=«/tweets/:tweetId» element={<TweetPage/>} />

<Route

path = «/tweets/new»

element = {

<RequireAuth>

<NewTweetPage/>

</RequireAuth>

}

/>

<Route path=»/» element = {<Navigate to =»/tweets» />} />

<Route path=»/404″ element = {<div> 404 | Not Found Page </div>} />

<Route path=»*» element = {<Navigate to =»/404″ />} />

</Routes>

</AuthContextProvider>

</div>

En las líneas de código anteriores puedes ver que existen tres rutas que empiezan por la URL «/tweets» (‘/tweets’, ‘/tweets/new’ y ‘/tweets/:tweetId’). Estas páginas, además de compartir un segmento de su URL, comparten elementos de su layout. Es decir, cuando abrimos estas páginas, vemos la misma cabecera y pie de página. Es en este tipo de casos en los que podemos anidar rutas con React Router. A continuación, te mostramos cómo.

Para anidar rutas con React Router, primero debemos seleccionar cuál será la ruta madre en la que insertaremos las demás. En nuestro caso es simple, usaremos la ruta ‘/tweets’, pues contiene la URL base de las otras dos rutas. Entonces, deberemos cerrar esta ruta e insertar las otras dos dentro, eliminando su fragmento ‘/tweets’. Esto lo hacemos porque, cuando anidamos rutas, las rutas hijas ya heredarán la ruta del padre.

En esta estructura de rutas, deberemos añadir una nueva. Esta ruta es la que renderizará el componente que previamente estaba renderizando /tweets. Para que esta ruta mantenga la URL del padre sin agregarle nada más, le insertaremos la propiedad index. Esto hará que esta ruta sea como un home de la mini aplicación /tweets.

<Routes>

<Route path=«/tweets» />

<Route index element={<TweetsPage/>} />

<Route path=«:tweetId» element={<TweetPage/>} />

<Route

path = «/new»

element = {

<RequireAuth>

<NewTweetPage/>

</RequireAuth>

}

</Route>

En este momento, lo que hemos hecho nos da exactamente el mismo resultado que las líneas de código anteriores. Sin embargo, todavía podemos hacer mucho más con esta anidación.

Una de las acciones que podemos ejecutar al anidar rutas con React Router es simplificar el render de dichas rutas. Como te hemos mencionado antes, las tres rutas anteriores comparten aspectos de su layout, en especial los elementos header y footer. Entonces, podríamos crear un componente con estos elementos de layout y renderizarlo en la ruta /tweets.

El componente layout que creemos con los elementos compartidos deberá tener una sección dinámica que pueda cambiar en función a la ruta hija renderizada. Una vez creemos este componente, podremos hacer que los componentes TweetsPage y NewTweetsPage sean mucho más pequeños, pues no tendrán header ni footer. Para insertar estos componentes dinámicos dentro del layout estático que comparten, utilizaremos el componente outlet de React Router.

¿Cuál es el siguiente paso?

Ahora que sabes cómo anidar rutas con React Router, ¡es momento de utilizar esta estrategia para volver tu aplicación más eficiente! Si quieres conocer más sobre este tipo de procesos, no solo en React, sino también en lenguajes puros como JavaScript, HTML y CSS, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. En este programa de formación intensiva, aprenderás todo lo necesario para convertirte en un experto del desarrollo web en pocos meses. ¿A qué esperas para dar el siguiente paso en tu formación y cambiar tu vida? ¡Solicita ahora más información!

👉 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]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿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!