Destacando um link ativo no React Router

Suponha que adicionamos vários produtos ao nosso aplicativo e estamos visualizando cada um dos produtos. Como podemos entender em qual página de produto estamos no momento? Vamos destacar esse produto na lista, por exemplo, em negrito e na cor marrom, e se o link ainda estiver carregando, em cinza.

Para começar, vá para a página inicial, adicione 4 produtos à lista e insira dados para cada um deles. Dê a eles quaisquer nomes.

Para destacar o link ativo, o componente NavLink nos ajudará. É uma variação do componente Link, que conhece o estado dos dados. Geralmente é aplicado ao criar um menu de navegação.

Vamos abrir root.jsx e importar NavLink (não se esqueça de remover a importação Link, senão o React pode reclamar, pois não o usamos mais):

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

Em seguida, no layout, substituiremos o componente Link por NavLink:

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

E adicionaremos a prop className a ele, bem como usaremos lógica condicional. Se a página foi carregada, o link passará para o estado ativo; se estiver carregando, para o estado de carregamento; se nada estiver acontecendo, permanecerá como antes. Dependendo disso, a classe do link mudará:

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

Resta-nos adicionar estilos para as classes active e loading em nosso arquivo css:

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

a.loading {
	color: gray;
}

Pronto! Agora clique nos produtos na lista.

Pegue o aplicativo criado por você nas tarefas das lições anteriores. Usando os materiais da lição, implemente nele o destaque do link ativo para a lista de estudantes, de modo que seja claro qual estudante o usuário está visualizando no momento.