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):

routes/root.jsximport { NavLink } from 'react-router-dom';

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

routes/root.jsx<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á:

routes/root.jsx<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:

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

a.loading {
  color: gray;
}

Pronto! Agora clique nos produtos na lista.