Evidențierea linkului activ în React Router

Să presupunem că am adăugat mai multe produse în aplicația noastră și vizualizăm fiecare dintre produse. Cum putem înțelege pe pagina carei produs ne aflăm în prezent? Să evidențiem acest produs în listă, de exemplu cu font îngroșat și culoare maro, iar dacă linkul se încarcă, atunci cu gri.

Pentru început, accesați pagina principală, adăugați în listă 4 produse și pentru fiecare dintre ele introduceți date. Dați-le orice nume.

La evidențierea linkului activ ne va ajuta componenta NavLink, aceasta este un subtip al componentei Link, care cunoaște starea datelor. De obicei, este utilizat la crearea unui meniu de navigare.

Să deschidem root.jsx și să importăm NavLink (nu uitați să eliminați importul Link, altfel React se poate plânge, deoarece nu-l mai folosim):

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

Apoi, în layout, înlocuim componenta Link cu NavLink:

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

Și adăugați-i prop-ul className, și de asemenea utilizați logica condițională. Dacă pagina s-a încărcat, atunci linkul va trece în starea activă, dacă se încarcă, atunci în starea de încărcare, iar dacă nimic nu se întâmplă, va rămâne neschimbat. În funcție de aceasta, se va schimba clasa linkului:

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

Ne rămâne să adăugăm stiluri pentru clasele active și loading în fișierul nostru css:

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

a.loading {
	color: gray;
}

Gata! Și acum faceți clic pe produse din listă.

Luați aplicația creată de dvs. în sarcinile din lecțiile anterioare. Folosind materialele lecției, implementați în ea evidențierea linkului activ pentru lista de studenți, astfel încât să fie clar datele cărui student le vizualizează utilizatorul în prezent.