Link vs NavLink: navegación interna con React Router

Cuando trabajas con React Router, los componentes Link y NavLink te permiten crear navegación interna en una SPA sin recargar la página completa. Esto es clave para cualquier desarrollador que construye aplicaciones multipágina con React y quiere una experiencia fluida para el usuario.

En una app tradicional de HTML usarías etiquetas anchor (las famosas a tags), pero eso obliga a recargar toda la página. En una single page application buscamos justo lo contrario: cambiar de sección manteniendo el estado de la app. Y aquí es donde entran estos dos componentes.

¿Qué diferencia hay entre Link y NavLink en React Router?

Ambos reemplazan a la etiqueta anchor y te llevan al siguiente enlace sin recargar la página. La diferencia está en algo muy puntual: NavLink puede leer el contexto y saber qué página está abierta actualmente, lo que te permite mantener un enlace activo.

¿Qué es un Link en React Router? Es un componente que reemplaza la etiqueta anchor de HTML para navegar entre rutas sin recargar la página. Funciona como un wrapper de la anchor tag tradicional.

Para empezar a usarlo, vas al componente header, que vive dentro de la carpeta layout, y haces el import del Link de React Router [02:16]. Al importarlo, el editor intenta reemplazar automáticamente todos los enlaces que ya tienes con este nuevo componente.

Después solo ajustas cada ruta: la página de search, la de favorites, la de profile y la de login. Cada enlace apunta a una ruta que ya existe en tu archivo de rutas, solo faltaba conectarla.

¿Cómo pruebo que la navegación interna funciona?

Una vez guardados los cambios, regresas al navegador y notas que los estilos cambian, porque antes tenías un componente HTML plano y ahora tienes un componente de React Router [03:20].

Al hacer clic en Search, te lleva a la ruta de búsqueda sin refrescar la página y cambiando la URL. Lo mismo pasa con Favorites: ya estás navegando internamente usando un solo componente, el Link.

¿Cuándo debo usar NavLink en lugar de Link?

Aquí viene lo interesante. Con Link navegas, pero no sabes en qué página estás parado. Si quieres darle al usuario un indicador visual de que está en Favorites, Profile o Login, usas NavLink [04:32].

NavLink es el recomendado para menús de navegación. Por ejemplo, el logo de Platzi Host puede quedarse como un Link, mientras que el menú de navegación se reemplaza con NavLink.

¿Para qué sirve NavLink? Sirve para menús de navegación porque detecta la ruta actual y aplica automáticamente una clase active al enlace de la página en la que estás. Así el usuario sabe en qué sección se encuentra.

Su estructura es muy parecida a la de Link, con la diferencia de que lee la ubicación actual y te permite aplicar un estilo según corresponda.

¿Cómo funciona la clase active de NavLink?

Tanto Link como NavLink son wrappers de nuestra anchor tag. La magia está en cómo NavLink marca cuál enlace está activo.

Al inspeccionar el código, notas que Favorites tiene una clase active aplicada por defecto porque es un NavLink, mientras que Search no la tiene [06:44]. Si cambias a Search, la clase active ahora aparece en ese enlace y desaparece de Favorites.

Eso te ayuda muchísimo, porque puedes ir a tu hoja de estilos y trabajar con esa clase. Estos son los pasos para aplicar el estilo:

1. Abre el archivo de estilos index.css.
2. Agrega una regla para la clase active dentro del header nav, que aplique solo cuando el enlace tenga esa clase.
3. Guarda y regresa al navegador para ver el resultado.

Al guardar, el botón de la página en la que estás aparece con un estilo más llamativo, un blanco más visible. No modificaste el header ni agregaste nada especial: simplemente lo distinguiste usando un NavLink.

¿Cómo agrego el header a otras páginas de la app?

Para que el header aparezca en la página de search o favorites, necesitas importarlo y usarlo dentro de cada página [05:00]. Como tienes dos elementos (el header y el main), necesitas un elemento padre que los envuelva.

Ahí usas un fragment, que permite renderizar varios elementos sin agregar un nodo extra al DOM. Este concepto se explica a detalle en el curso de React, pero la idea es simple: los componentes de React necesitan un único elemento envolvente.

Así queda la estructura para cada página que quieras migrar:

• Importar el componente header.
• Envolver header y main dentro de un fragment.
• Guardar y verificar que el header aparezca correctamente.

En la práctica, ya migraste las páginas de search y favorites, además de la homepage, la not found, la de profile y la de login que venías construyendo en clases anteriores. La de login incluso tiene un botón HTML sin estilos todavía.

Esa es la gran ventaja de usar NavLink en un menú de navegación: le muestras al usuario en qué sección está sin lógica extra. Aquí solo agregamos un color, pero podrías usar una forma, una línea o cualquier detalle visual.

En la siguiente lección verás cómo navegar desde el código, por ejemplo después de iniciar sesión o al seleccionar una propiedad. Mientras tanto, quedan un par de páginas por migrar para que usen el header.

¿Cómo te fue aplicando lo aprendido y completando esa migración? Cuéntame en los comentarios si obtuviste un resultado distinto.