React Router es una librería que nos ayuda a desarrollar una navegación dinámica para nuestros proyectos React. Allí podemos declarar, redirigir, reemplazar y anidar rutas. Declarar ruta con ID en React Router es una forma de automatizar la creación de enlaces o URL únicos para componentes y objetos que se repetirán a lo largo de nuestra aplicación. Por ello, es una acción muy útil cuando creamos aplicaciones con la lógica de red social. En este post, te enseñaremos exactamente cómo declarar esta ruta.
¿Qué es una ruta con ID en React Router?
Una ruta con ID en React Router es un tipo de URL que, en vez de tener palabras estáticas, llama al ID de la página. Esto quiere decir que tiene un código único que se construye en el momento de ejecución según la propiedad ID del objeto renderizado.
Cuando creamos una ruta con ID en React Router, normalmente se la asignamos a un objeto que tendrá una propiedad ID cambiante. Un ejemplo de esto es un componente que se construye con contenido de cada usuario. Si pensamos, por ejemplo, en Twitter, esta aplicación tiene un componente tweet. Gracias a este componente y a un formulario, cada usuario puede crear un nuevo componente tweet. Para diferenciar cada tweet, se puede manejar un código único, es decir, un ID.
¿Cómo declarar ruta con ID en React Router?
Para declarar ruta con ID en React Router, primero deberás tener un contenido que tenga una propiedad ID. Para ello, nosotros hemos creado una aplicación que simula Twitter. En nuestros posts sobre crear una página listado en React y transformar un array de objetos en enlaces, te hemos enseñado cómo crear una página con contenido de diversos objetos, que nosotros hemos llamado TweetsPage. A continuación, puedes ver el código que nos permite pintar los contenidos de este componente en pantalla:
{tweets.map (tweet => (
<li key={tweet.id}>{tweet.content}</li>
))}
Ahora, el primer paso para declarar ruta con ID en React Router es crear un enlace a este contenido li. Para ello, pondremos el contenido de estos li dentro de un elemento link. Recuerda que para que esto funcione también debes darle una propiedad to a este elemento. Dicha propiedad sirve para dirigir el link hacia la ruta. Por ahora, usaremos la ruta home ‘/’.
{tweets.map (tweet => (
<li key={tweet.id}>
<Link to=‘/’>{tweet.content}</Link>
</li>
))}
Una vez tenemos este enlace, debemos definir cuál es la URL a la que queremos acceder cuando abrimos cada uno de estos componentes. Para ello, usaremos el ID del objeto dentro de la URL a definir. Esto es tan sencillo como montar una URL mediante JavaScript y luego llamar a la propiedad ID.
Recuerda que React es una librería JavaScript. Esto quiere decir que mucho de su código está inspirado en este lenguaje. Además, podemos llamar a código puro de JavaScript mediante el uso de las llaves. Te invitamos a conocer más sobre este tema en nuestro post sobre abrir una ventana a JavaScript en React.
Para declarar ruta con ID en React Router, usaremos las llaves para llamar a código JavaScript. Dentro de ellas, llamaremos al tweet.id usando la expresión ${}, que nos permite llamar al valor de una variable o propiedad. En este sentido, podríamos escribir las siguientes líneas de código:
{tweets.map (tweet => (
<li key={tweet.id}>
<Link to=‘/tweets/${tweet.id}’>{tweet.content}</Link>
</li>
))}
Con las líneas de código anteriores, estamos haciendo que cada tweet mostrado en la página de listado es realmente un enlace hacia su página de detalle. Esta página de detalle tiene una ruta única gracias al ID del objeto tweet. Este es el uso más común para declarar ruta con ID en React Router.
¿Cuál es el siguiente paso?
Ahora que sabes cómo declarar ruta con ID en React Router, ¡ha llegado el momento de crear la navegación de tu aplicación web! Si quieres seguir aprendiendo sobre cómo crear todo tipo de proyectos de programación para la web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a dominar herramientas y lenguajes como React, JSX, JavaScript, HTML, CSS y mucho más. ¿A qué esperas para dar el siguiente paso en tu formación? ¡Inscríbete ya para convertirte en un experto del desarrollo web!
