React Router es una librería que nos permite desarrollar una navegación dinámica para nuestras aplicaciones creadas con React. Para ello, React Router utiliza dos elementos fundamentales: los componentes y los hooks. En este post, te enseñaremos qué es y para qué sirve el hook useLocation de React Router, fundamental para conocer información sobre nuestra URL.
¿Qué es el hook useLocation de React Router?
El hook useLocation de React Router es uno de los hooks principales de esta librería. Los hooks son el segundo elemento más importante para desarrollar la navegación de una aplicación React, después de los componentes principales de React Router.
Además del react router use location, existen otros tres hooks importantes en esta librería. Para conocer cuáles son y cómo funcionan, te invitamos a leer nuestro post sobre los hooks en React Router.
El hook useLocation de React Router es un hook que podemos utilizar en cualquier componente. Este hook nos devuelve el objeto location. Dentro de este objeto, tenemos información sobre la URL actual, es decir, la que el usuario ha pedido recientemente. Esta información se guarda bajo la clave pathname.
¿Para qué sirve el hook useLocation de React Router?
Ya que el hook useLocation de React Router contiene un objeto location con la información de la URL actual, podemos usar este hook cuando queramos redirigir al usuario a la URL que haya pedido recientemente, después de ejecutar una acción.
Pongamos un ejemplo. Supongamos que un usuario buscó una URL con la que puede hacer un nuevo contenido en nuestra aplicación (“/content/new”). Ahora, nuestra aplicación no le da acceso al usuario a esta URL hasta que haya iniciado sesión. Entonces, tenemos programada una protección de rutas con React Router que define que, si el usuario no ha iniciado sesión, lo redirigimos a la página de login para que ejecute esta acción.
Una vez el usuario ha iniciado sesión, la mejor práctica para la experiencia de usuario es redirigirlo a la página con la URL que había buscado. Para ello, usaremos el hook useLocation de React Router.
Entonces, supongamos que tenemos el componente RequireAuth que hemos creado en nuestro post sobre la protección de rutas con React Router. Este componente define que, cuando el estado isLogged (que nos permite controlar estado login en React) es verdadero, se renderiza la página en la ruta actual. Sin embargo, si este estado es igual a false, hacemos una redirección a la página de login.
// react-router useloaction
const RequireAuth = ({isLogged, children}) => {
if (!isLogged) {
return <Navigate to=’/login’/>
}
return children
};
Ahora, podemos añadir el hook useLocation de React Router para saber qué ruta nos han pedido. Para ello, basta con insertar una variable en donde se guarde el objeto que nos da este hook. Entonces, podemos insertar la siguiente línea de código dentro de nuestro componente RequireAuth (ten en cuenta que debes insertar esta línea justo antes del if):
//uselocation() react
const location = useLocation ( )
Luego, podemos usar la variable location y guardarla dentro de un estado de nuestro componente. Para ello, podemos pasar una prop llamada state a nuestro componente navigate. Allí, guardaremos el valor de la variable location. A continuación, puedes ver las líneas de código finales de este componente:
// use location react router
const RequireAuth = ({isLogged, children}) => {
const location = useLocation ( )
// uselocation react js
if (!isLogged) {
return <Navigate to=’/login’ state={{ from: location}}/>
}
return children
};
Lo que genera el uso del hook useLocation es que podemos, además de saber en qué URL estamos, saber de dónde venimos. Como sabemos de dónde venimos, podemos completar el flujo de login. Una vez completado este flujo, deberemos decirle a nuestra ruta que, en vez de ir al home, redirija al usuario a la URL que había pedido. Para ello, podemos hacer uso del hook useNavigate directamente en la sección de código donde se ejecute el login. Este hook nos permite forzar una redirección a la página que queramos, en este caso, la página que ha pedido el usuario.
Para conocer cómo funciona el hook useNavigate te recomendamos ir al artículo useNavigate en reactrouter.com.
¿Quieres seguir aprendiendo?
Después de leer este post, sabes exactamente qué es y cómo funciona el hook useLocation de React Router, sin embargo, ¡todavía queda mucho por aprender de esta librería! Por ello, te aconsejamos que descubras para qué se utiliza useLocation en React Redux también.
Finalmente, si quieres seguir formándote respecto a esta y otras herramientas de programación para la web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. En este programa de formación íntegra e intensiva, aprenderás a dominar las herramientas y lenguajes necesarias para convertirte en un experto del desarrollo web en pocos meses. ¿Quieres seguir aprendiendo con nosotros? ¡Anímate a matricularte y dale un giro a tu carrera!
