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 react 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 las rutas anidadas react router v6 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 react 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.
// rutas dinamicas react
<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> // route path
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 en react 2022, ¡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!
