Cómo resaltar un enlace activo en React Router

Supongamos que hemos añadido varios productos a nuestra aplicación y estamos viendo cada uno de los productos. ¿Cómo podemos saber en la página de qué producto nos encontramos actualmente? Vamos a resaltar este producto en la lista, por ejemplo en negrita y color marrón, y si el enlace aún se está cargando, en gris.

Para empezar, vaya a la página principal, añada 4 productos a la lista y para cada uno de ellos ingrese los datos. Asigne cualquier nombre.

Para resaltar el enlace activo nos ayudará el componente NavLink, que es una variante del componente Link, que conoce el estado de los datos. Normalmente se usa al crear un menú de navegación.

Abramos root.jsx e importemos NavLink (no olvide eliminar la importación de Link, o React podría quejarse, ya que ya no lo usamos):

import { NavLink } from 'react-router-dom';

Luego, en el diseño, reemplacemos el componente Link por NavLink:

<NavLink key={product.id} to={`products/${product.id}`}>
	{product.name ? product.name : <i>unnamed</i>}
</NavLink>

Y añadamos la prop className, así como usemos lógica condicional. Si la página se cargó, el enlace pasará a estado activo, si se está cargando, a estado de carga, si no pasa nada, permanecerá igual. Dependiendo de esto, cambiará la clase del enlace:

<NavLink
	key={product.id}
	to={`products/${product.id}`}
	className={({ isActive, isPending }) =>
		isActive ? 'active' : isPending ? 'loading' : ''
	}
>
	{product.name ? product.name : <i>Unnamed</i>}
</NavLink>

Solo nos queda añadir estilos para las clases active y loading a nuestro archivo css:

a.active {
	font-weight: bold;
	color: brown;
}

a.loading {
	color: gray;
}

¡Listo! Y ahora haga clic en los productos de la lista.

Tome la aplicación creada por usted en las tareas de lecciones anteriores. Usando los materiales de la lección, implemente en ella el resaltado del enlace activo para la lista de estudiantes, de modo que quede claro los datos de qué estudiante el usuario está viendo actualmente.