Hook useLocation en React Router: Navegación Inteligente en tus Componentes

---

React Router es una de las librerías más populares para manejar la navegación en aplicaciones React. Entre sus herramientas más útiles está el hook useLocation, que permite acceder a información detallada sobre la ubicación actual en tu aplicación.

¿Qué es el Hook useLocation?

El hook useLocation es una funcionalidad proporcionada por React Router que devuelve el objeto de ubicación actual de la aplicación. Este objeto incluye detalles como:

¿Cómo Usar useLocation?

Primero, asegúrate de que tu proyecto tenga instalado React Router:

npm install react-router-dom

Luego, usa el hook dentro de un componente funcional para acceder a la ubicación actual.

Ejemplo Básico de useLocation

Vamos a usar useLocation para mostrar información de la ubicación actual:

import React from 'react';
import { useLocation } from 'react-router-dom';

function LocationDisplay() {
const location = useLocation();

return (
  <div>
    <h1>Información de la Ubicación Actual</h1>
    <p><strong>Pathname:</strong> {location.pathname}</p>
    <p><strong>Search:</strong> {location.search}</p>
    <p><strong>Hash:</strong> {location.hash}</p>
    <p><strong>State:</strong> {JSON.stringify(location.state)}</p>
  </div>
);
}

export default LocationDisplay;

Este componente muestra información sobre la ubicación actual de la página, útil para depuración o interfaces dinámicas.

Extracción de Parámetros

function FiltroUsuarios() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);

const rol = queryParams.get('rol');
const activo = queryParams.get('activo') === 'true';

return <ListaUsuarios rol={rol} activo={activo} />;
}

Este código extrae parámetros de consulta rol y activo de la URL usando useLocation y URLSearchParams. El parámetro activo se convierte en un valor booleano. Luego, estos valores se pasan como props al componente ListaUsuarios para filtrar la lista según el rol y el estado activo.

Uso Avanzado: Leer Parámetros y Estados

Puedes combinar useLocation con useNavigate o useParams para trabajar con rutas dinámicas y estados.

Ejemplo: Extraer Parámetros de Consulta

import React from 'react';
import { useLocation } from 'react-router-dom';

function ProductList() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const category = queryParams.get('categoria');

return (
  <div>
    <h1>Productos</h1>
    {category ? (
      <p>Filtrando por categoría: {category}</p>
    ) : (
      <p>Mostrando todos los productos</p>
    )}
  </div>
);
}

export default ProductList;

En este ejemplo, useLocation se usa para acceder a los parámetros de consulta (?categoria=...) y filtrar los productos según la categoría.

Caso de Uso: Mantener Estado al Navegar

Puedes pasar datos entre rutas usando la propiedad state de React Router y luego acceder a ellos con useLocation.

Ejemplo: Pasar Datos entre Rutas

import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

function Dashboard() {
const navigate = useNavigate();

const goToProfile = () => {
  navigate('/perfil', { state: { userId: 42 } });
};

return (
  <div>
    <h1>Dashboard</h1>
    <button onClick={goToProfile}>Ir a Perfil</button>
  </div>
);
}

function Profile() {
const location = useLocation();
const { userId } = location.state || {};

return (
  <div>
    <h1>Perfil de Usuario</h1>
    {userId ? <p>ID del Usuario: {userId}</p> : <p>No se proporcionó ID</p>}
  </div>
);
}

export { Dashboard, Profile };

En este ejemplo, el state se usa para pasar el userId al componente de perfil sin usar parámetros en la URL.