¿Qué es hook useParams de React Router y cómo funciona?

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

¿Sabes en qué consiste hook useParams de React Router? React Router es una herramienta muy poderosa para finalizar nuestras aplicaciones React. Como toda librería en el mundo de la programación, esta nos da un conjunto de archivos con una funcionalidad específica. La función de esta herramienta es simplificar la creación, redirección y anidación de rutas para crear una navegación dinámica.

En este post, te enseñaremos qué es y cómo funciona el hook useParams de React Router, fundamental para conocer los parámetros de nuestras rutas.

¿Qué es el hook useParams de React Router?

El hook useParams de React Router es uno de los hooks principales de esta librería. Como puedes leer en nuestro post sobre los hooks en React Router, estos elementos son muy importantes para acceder a diversas propiedades de nuestros componentes. Si no conoces estos últimos, te invitamos a leer nuestro post sobre los componentes principales de React Router.

De manera particular, el hook useParams de React Router nos permite acceder desde un componente a los parámetros de la ruta. Para ello, nos devuelve un objeto de claves/valores con los parámetros dinámicos de la URL.

Si quieres conocer con mayor profundidad la teoría de este componente, te recomendamos leer el post sobre useParams en reactrouter.com.

¿Cómo funciona el hook useParams de React Router?

Para usar el hook useParams de React Router te recomendamos guardar su valor dentro de una variable. Ya que este valor no va a cambiar, puedes utilizar la palabra clave const para declarar tu variable:

const params = useParams( )

Esto también te sirve para inspeccionar el objeto que nos devuelve este hook. Para ello, basta con que insertes el comando console.log (params) y veas el resultado en el inspector de tu navegador. Allí podrás ver que params es un objeto con una clave. Esta clave sale de la URL con una variable dinámica.

Un ejemplo de variable dinámica dentro de una URL es cuando decidimos declarar ruta con ID en React Router. En estos casos, estamos definiendo un ID como parte de la URL, un dato que cambia según el objeto a renderizar. Entonces, esta clave dinámica se recoge en el objeto de params. Notarás que, además, se recoge con el mismo nombre que le hemos dado a esta variable en la ruta creada para nuestra URL.

Esta función es muy similar a lo que hace el framework «Express», que nos entrega el parámetro de la ruta con el nombre que le hayamos puesto. Puedes conocer más sobre esta herramienta en el post de la página oficial de Mozilla Developer Network sobre Express.

Puedes utilizar el parámetro que obtenemos de este hook de diversas maneras. La principal es pintar en pantalla los datos dinámicos que tenemos en la URL. Para ello, basta con que llames a la variable en donde se guarda este hook en algún componente a renderizar. Recuerda que para llamar variables puedes usar la sintaxis de JavaScript, disponible cuando decides abrir una ventana a JavaScript en React.

¿Qué sigue ahora?

Ahora que sabes qué es y cómo funciona el hook useParams de React Router, ¡es el momento perfecto para utilizarlo en la navegación de tus propios proyectos! Para conocer más sobre la creación de todo tipo de proyectos de programación para la web, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva e íntegra donde aprenderás a desarrollar proyectos con herramientas y lenguajes como React, JavaScript, HTML, CSS y JSX. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web? ¡Te esperamos para ayudarte a cambiar 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]

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