React Router: ¿Cómo usar las rutas en React? - Parte II

En la parte 1 de este módulo aprendimos cómo crear una estructura funcional con React Router DOM. En esta segunda parte del artículo aprenderemos cómo usar los parámetros de URL junto con React Router. Para ello continuaremos el proyecto que hemos estado usando desde la parte 1 del artículo, si llegaste aquí en paracaídas y quieres obtener esta explicación desde el principio, visita este enlace.

¿Qué son los parámetros de la URL?

Los parámetros de la URL se refieren a valores variables que pueden incluirse en la propia URL para representar información específica, como IDs, nombres u otros datos relevantes para la página o componente que se está renderizando. Los parámetros de la URL son una parte esencial del enrutamiento dinámico, lo que te permite crear páginas reutilizables y dinámicas que muestran información diferente según los valores proporcionados en la URL.

¡Vamos a verlo en la práctica!

Configurando los parámetros de la URL:

Para poder utilizar este recurso, será necesario realizar una configuración básica. Supongamos que el usuario está en la pestaña de productos y quiere ver los datos de un juego X, ahí es donde entra este recurso.

En el archivo router.jsx añadiremos una nueva ruta. Esta nueva ruta tendrá como camino / products pero además, cuando el usuario haga clic en el producto, la ruta deberá accederse mediante algún parámetro. Este parámetro debe ser un nombre exclusivo, es decir, un ID. Para crear este parámetro es muy sencillo, basta con pasar en el camino /products/ el parámetro :productId. Y vinculado a este camino, el elemento que se cargará, es decir, la pantalla de visualización. Así, el archivo router.jsx quedará de la siguiente manera:

Hecho esto, es necesario crear la página Product, dentro de la carpeta page. Dentro de la carpeta page, crea el archivo Product.jsx y dentro de él, agrega el siguiente contenido:

Las carpetas y archivos deberían verse así hasta ahora.:

Ajustando el redireccionamiento para los parámetros de la URL:

Ahora que hicimos la configuración inicial de la página, lo justo es que cada producto acceda a sus respectivas características. Para ello, agregaremos el componente Link que React Router DOM proporciona en el archivo Products.jsx:

Ahora puedes hacer una prueba. Accediendo a la pestaña de Productos y haciendo clic en el botón "ver", serás redirigido a la página que creamos (Product) y en la URL estará /product/1 (si accedes al primer producto será 1, de lo contrario, será cualquier otro valor).

Página de Productos:

Después de hacer clic para ver el producto:

¡Ver que los parámetros de la URL han cambiado y también el contenido!

Renderizando los datos de cada producto de forma dinámica

Creamos una página Product, que por defecto tiene solo un enlace y un título, pero no es eso lo que queremos mostrar al usuario. Lo que queremos mostrar son las informaciones generales sobre el producto que está accediendo.

Para hacerlo, es muy simple. Basta con utilizar un hook de React Router DOM: useParams(). Este hook sirve para utilizar los parámetros de la URL y así capturar el valor, en este caso, el ID del producto que el usuario está accediendo y renderizar en pantalla la información del producto que desea visualizar.

OBSERVACIÓN IMPORTANTE: El hook useParams retorna un objeto. Por lo tanto, puedes acceder a este valor del parámetro mediante la sintaxis nomeDaVariavel.nomeDoParâmetro o puedes desestructurar este objeto, capturando directamente el valor del parámetro (utilizaremos este método en este artículo).

Así que, el archivo Product.jsx quedará así:

Ahora, tendremos que importar todos los productos de nuestra base de datos ficticia y buscar el producto que el usuario está accediendo usando el método find() en la lista de productos:

OBSERVACIÓN IMPORTANTE: En el método find() utilicé antes de productId el signo "+" para convertir de manera simple el tipo de valor de string a número. Si esta conversión no se hace, daría un error. Puedes probar quitando el signo "+".

Finalmente, renderizaremos los datos del producto:

Analizando el código en el entorno de producción

Ahora podemos ver cómo está quedando nuestro proyecto en el navegador. Al intentar ver los detalles de cualquier producto, deben cargarse todas sus informaciones de la siguiente manera:

Si tu proyecto está dando algún error, te recomiendo analizarlo detenidamente, y si es necesario, puedes acceder al repositorio del proyecto en Github.

Conclusión

En conclusión, en este artículo exploramos la importancia y utilidad de los parámetros de la URL en React Router DOM. Aprendimos a utilizarlos para crear páginas dinámicas y reutilizables, permitiendo que nuestras aplicaciones rendericen contenido específico basado en la información presente en la URL. Vimos cómo capturar estos parámetros usando el hook useParams() y cómo utilizarlos para buscar y mostrar datos relevantes.

En el próximo artículo, continuaré esta serie expandiendo nuestro conocimiento sobre cómo manejar un aspecto crucial en el desarrollo de aplicaciones con React Router DOM: el manejo de errores. Abordaremos cómo crear páginas de error personalizadas, manejar situaciones en las que se acceden a rutas no coincidentes y mejorar la experiencia del usuario al enfrentar problemas de navegación.

Gracias por seguir este artículo y por tu dedicación en aprender más sobre React Router DOM y sus funcionalidades. Espero verte en la tercera y última parte de esta serie, donde continuaremos profundizando nuestro conocimiento y mejorando nuestras habilidades de desarrollo con React Router DOM. ¡Hasta entonces, sigue explorando, codificando y ampliando tus horizontes en el mundo del desarrollo web con React!