Cómo activar el link correspondiente según la ruta anidada que coincida en Remix

Si vienes del desarrollo web desde hace muchos años, seguro recuerdas que antes teníamos total control de nuestro backend, era muy común usar PHP, Python, Ruby on Rails y hasta Java para el backend, y desde ahí podíamos saber exactamente en qué URL se encontraba el usuario.

Pero cuando pasamos a los SPA's y la nueva era del desarrollo Frontend, perdimos este poder (al menos nativamente), pero lo hemos recuperado, y claro, no sería de la mejor manera si no tuviéramos un hook para ello.

El hook useLocation

React Router cuenta con uno de los hooks más infravalorados de la librería, el hook useLocation.

Cuando lo desestructuramos podemos obtener el pathname actual del documento, lo que nos permite acceder a la URL del usuario en cualquier momento, algo muy útil para saber en qué URL nos encontramos y así poder activar el link correspondiente.

tsx

// NavBar.tsximport { Link, useLocation, Outlet } from "react-router-dom";export default function Navbar() {  const { pathname } = useLocation();  return (    <nav>      <Link        to="/tacos"        className={pathname.includes("/tacos") ? "text-blue-500 font-bold" : ""}      >        Tacos      </Link>      <Link        to="/pizzas"        className={pathname.includes("/pizzas") ? "text-blue-500 font-bold" : ""}      >        Pizzas      </Link>      <Link        to="/tortas"        className={pathname.includes("/tortas") ? "text-blue-500 font-bold" : ""}      >        Tortas      </Link>      <Outlet />    </nav>  );}

🎬 ¿Te está gustando este contenido? Tenemos más tutoriales sobre React Router y Remix en nuestro canal de YouTube.

Rutas anidadas

Para que esto funcione correctamente, necesitas tener una estructura de rutas anidadas. Por ejemplo:

/dashboard  /dashboard/tacos  /dashboard/pizzas  /dashboard/tortas

En Remix (y React Router v6+), el componente <Outlet /> renderiza la ruta hija que coincida con la URL actual, mientras que el layout padre permanece visible.

Función auxiliar para clases

Si tienes muchos links, puedes crear una función auxiliar:

tsx

const getLinkClassName = (path: string) => {  const isActive = pathname.includes(path);  return isActive    ? "text-blue-500 font-bold underline"    : "text-gray-600 hover:text-gray-900";};// Uso:<Link to="/tacos" className={getLinkClassName("/tacos")}>  Tacos</Link>

Alternativa: NavLink

React Router también ofrece el componente <NavLink> que hace esto automáticamente:

tsx

import { NavLink } from "react-router-dom";<NavLink  to="/tacos"  className={({ isActive }) =>    isActive ? "text-blue-500 font-bold" : "text-gray-600"  }>  Tacos</NavLink>

La diferencia es que NavLink solo marca como activo cuando la ruta coincide exactamente (o sus hijas directas), mientras que con useLocation tienes control total sobre la lógica de coincidencia.

¿Cuándo usar cada uno?

Caso	Solución
Links simples de navegación	`NavLink`
Lógica personalizada de activación	`useLocation`
Activar padre cuando hijo está activo	`useLocation` con `includes()`
Múltiples rutas activan mismo link	`useLocation` con lógica custom

Con useLocation recuperas el poder que teníamos en el backend tradicional: saber exactamente dónde está el usuario y actuar en consecuencia.

Abrazo. bliss.

Cómo activar el link correspondiente según la ruta anidada que coincida en Remix

Héctor Bliss

El hook useLocation

Rutas anidadas

Función auxiliar para clases

Alternativa: NavLink

¿Cuándo usar cada uno?

jQuery 4: Lo que necesitas saber

Checa este otro Post

Adiós ESLint y Prettier: Por qué migramos a Biome

Checa este otro Post

Animaciones web con React + Motion 🧙🏻