La navegación en una aplicación React no debería forzar al navegador a pedir un HTML nuevo cada vez que el usuario hace clic. Con los componentes Link y NavLink de react-router-dom puedes cambiar de ruta desde JavaScript, conservar el estado de la app y, además, resaltar la ruta activa con estilos dinámicos.

Por qué reemplazar la etiqueta a por Link en React Router

Usar etiquetas <a> para mover al usuario entre rutas tiene dos problemas concretos. Si trabajas con un hash router, te toca escribir manualmente el # en cada href, por ejemplo /#/blog en lugar de /blog. Y si usas un browser router, el clic dispara una nueva petición al servidor que vuelve a descargar todo el HTML, perdiendo la principal ventaja de una SPA.

La solución es delegar la navegación a JavaScript. React Router ya sabe qué tipo de router configuraste y se encarga de añadir el hash cuando hace falta o de actualizar la URL sin recargar la página [02:30].

¿Qué hace el componente Link de React Router? Cambia la URL desde JavaScript sin recargar el HTML y, según el router que tengas configurado, agrega el hash automáticamente. Se usa con la prop to en lugar de href.

Cómo se importa y se usa Link

El componente Link se importa desde react-router-dom y reemplaza directamente a <a> dentro del menú. La diferencia clave en sintaxis está en la prop: ya no es href, ahora es to [04:10].

jsx import { Link } from 'react-router-dom';

<li><Link to="/">Home</Link></li> <li><Link to="/blog">Blog</Link></li> <li><Link to="/profile">Profile</Link></li>

Con esto, la navegación entre Home, Blog y Profile ocurre sin recargar la página y sin que tengas que preocuparte por el #.

Qué diferencia a NavLink de Link en React Router v6

NavLink funciona igual que Link: también recibe la prop to y renderiza un enlace. La ventaja es que te entrega información sobre si la ruta a la que apunta coincide con la ruta actual, lo cual sirve para resaltar el ítem del menú activo [06:20].

En la versión 6 de react-router-dom, las props className y style de NavLink aceptan una función en lugar de un string o un objeto. Esa función recibe un argumento llamado isActive, un booleano que te dice si el enlace corresponde a la URL actual.

jsx <NavLink to="/" style={({ isActive }) => ({ color: isActive ? 'red' : 'blue' })}

Home </NavLink>

Cuando estás en /, el enlace de Home se pinta rojo; al pasar a /blog, Home vuelve a azul y Blog se vuelve rojo. Así el usuario sabe en qué sección está, no solo por la URL.

¿Qué es isActive en NavLink? Es un parámetro booleano que React Router pasa a las funciones de className o style dentro de un NavLink. Vale true cuando la ruta del enlace coincide con la ruta activa.

Cómo aplicar estilos dinámicos sin repetir código

Si copias la misma función de style en cada NavLink, el menú crece y el código se vuelve tedioso. La práctica recomendada es declarar un arreglo con la información de cada ruta y recorrerlo con .map para generar los enlaces [10:45].

Cómo renderizar un menú dinámico con un array de rutas

Define un arreglo de objetos donde cada objeto tenga las propiedades que cambian entre un enlace y otro: la ruta destino y el texto visible. Después usa .map para devolver un NavLink por cada elemento.

jsx const routes = [ { to: '/', text: 'Home' }, { to: '/blog', text: 'Blog' }, { to: '/profile', text: 'Profile' } ];

<ul> {routes.map((route) => ( <li key={route.to}> <NavLink to={route.to} style={({ isActive }) => ({ color: isActive ? 'red' : 'blue' })} > {route.text} </NavLink> </li> ))} </ul>

Con este patrón, agregar una nueva sección al menú es solo añadir un objeto al arreglo. La función de estilos vive una sola vez y todos los enlaces heredan el comportamiento activo/inactivo.

Habilidades y conceptos que estás practicando

• Single Page Application (SPA): navegar sin recargar el HTML, manipulando la URL desde JavaScript.
• Prop to vs href: en React Router se usa to para indicar la ruta destino [04:10].
• Render condicional de estilos: aprovechas isActive para devolver diferentes valores en style o className [07:30].
• Renderizado de listas con .map: transformas un array de datos en un array de componentes JSX [11:20].
• Hash Router vs Browser Router: el comportamiento del enlace cambia según el tipo de router configurado.

En la próxima clase vas a ver cómo crear rutas dinámicas, esas en las que una parte de la URL cambia y te permite renderizar componentes con la misma estructura pero contenido distinto. ¿Cómo estás organizando los menús de tus apps en React? Cuéntalo en los comentarios.