¿Sabes qué son los hooks en React Router? React Router es una librería fundamental a la hora de diseñar la navegación de nuestras aplicaciones creadas con React. Gracias a esta librería, podemos crear una navegación dinámica. Es decir, una navegación que se modifica en el momento de ejecución de la aplicación y no antes del render. Además, React Router nos permite mantener la navegación a nivel del browser o del cliente, evitando las peticiones eternas al servidor.
En este post, te enseñaremos cuáles son los hooks en React Router, elementos fundamentales para utilizar esta librería al máximo.
¿Qué son los hooks?
Antes de hablarte sobre los hooks en React Router, consideramos importante darte una introducción a este concepto. Los hooks son un elemento que se introduce a React en su versión 16.8. Como puedes leer en el post Presentado hooks de Reactjs.org, estos elementos nos permiten usar el estado en React sin escribir una clase. Los hooks más conocidos en esta librería JavaScript son useState, que nos permite definir el valor inicial de un estado en React, y useEffect, que nos permite crear efectos en React.
De manera general, los hooks son funciones JavaScript. Sin embargo, tienen dos diferencias importantes. La primera es que un hook solo se puede llamar en el nivel superior de nuestro código. La segunda es que, a pesar de que los hooks son funciones de JavaScript, no pueden usarse desde las líneas de código puras de JavaScript. Es decir, aunque podemos abrir una ventana a JavaScript en React, debemos usar los hooks solo en componentes puros de React.
¿Qué son los hooks en React Router?
Los hooks en React Router son el segundo elemento de sintaxis más importante de esta librería. Ya hemos visto en nuestro post sobre los componentes principales de React Router que esta librería pone a nuestra disposición cinco componentes que nos permiten crear rutas y enlaces, además de redirigir y anidar rutas. Además de estos componentes, React Router ha creado sus propios hooks a partir de los hooks de React, como useEffect y useState. A continuación, te detallamos cuáles son estos hooks en React Router.
useParams
Este hook envuelve un objeto de claves/valores con los parámetros dinámicos de la URL. Para conocer más sobre este hook, te recomendamos dirigirte a la página oficial de reactrouter, donde encontrarás un artículo sobre useParams.
useLocation
Este hook devuelve el objeto location, que contiene información importante sobre la URL actual. Una de las funciones de este hook es decirnos cuál es la URL de la que venimos. Para conocer más sobre este hook y un ejemplo sobre cómo usarlo, te invitamos a leer nuestro post sobre el hook useLocation de React Router.
Este hook nos devuelve la función navigate, que nos permite hacer redirecciones programáticas. Con esta función, podemos hacer lo mismo que con el componente navigate. Es decir, redirigir una URL al resultado de otra ruta. Si no conoces cómo funciona este componente, te invitamos a leer nuestro post sobre redirigir una ruta con React Router.
La diferencia entre el hook useNavigate y el componente navigate en React Router es que, con el uso del hook, podemos utilizar una función. Esto implica que podemos utilizarlo en cualquier parte del código. El problema de utilizar componentes en vez de funciones es que debemos renderizarlos. Ya que una función no necesita este proceso de render, podemos insertarla donde queramos.
useSearchParams
Este es un hook que nos permite trabajar con la query string de la URL. El hook useSearchParams nos devuelve una pareja con los searchParams en forma de URLSearchParams y una función para actualizarlos. Para conocer más sobre este hook, te recomendamos ir a la página oficial de React Router, donde encontrarás un post sobre useSearchParams. Ten presente que este artículo habla de la versión para la web de este hook.
¿Te animas a seguir aprendiendo?
Ahora que sabes qué son y cómo funcionan los hooks en React Router, seguro que quieres seguir aprendiendo sobre las posibilidades que esta y otras herramientas tienen para ti. Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, un espacio intensivo en el que aprenderás a dominar herramientas y lenguajes de programación para la web como JavaScript, React, JSX, HTML y CSS. ¿Te animas a seguir aprendiendo con nosotros para triunfar en el sector IT? ¡Inscríbete ya y conviértete en un experto!
