Theksimi i Lidhjes Aktive në React Router

Supozoni se kemi shtuar disa produkte në aplikacionin tonë dhe po shikojmë secilin prej produkteve. Si mund të kuptojmë në faqen e cilit produkt jemi aktualisht? Le ta theksojmë atë produkt në listë, për shembull me shkronja të trasha dhe ngjyrë kafe, dhe nëse lidhja është duke u ngarkuar, atëherë me gri.

Për të filluar, shkoni në faqen kryesore, shtoni në listë 4 produkte dhe për secilin prej tyre vendosni të dhënat. Jepuni atyre çdo emër.

Në theksimin e lidhjes aktive do të na ndihmojë komponenti NavLink, ky është një nënlloj i komponentit Link, i cili njeh gjendjen e të dhënave. Zakonisht përdoret gjatë krijimit të një menuje navigimi.

Le të hapim root.jsx dhe të importojmë NavLink (mos harroni të hiqni importin e Link, përndryshe React mund të ankohet, sepse ne nuk e përdorim më):

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

Pastaj në layout, le të zëvendësojmë komponentin Link me NavLink:

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

Dhe t'i shtojmë prop className, si dhe të përdorim logjikë të kushtëzuar. Nëse faqja është ngarkuar, atëherë lidhja do të shkojë në gjendje aktive, nëse po ngarkohet, atëherë në gjendje ngarkimi, nëse asgjë nuk po ndodh, atëherë do të mbetet e njëjtë. Në varësi të kësaj do të ndryshojë klasa e lidhjes:

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

Na mbetet të shtojmë stile për klasat active dhe loading në skedarin tonë css:

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

a.loading {
	color: gray;
}

Gati! Dhe tani klikoni në produktet në listë.

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të mëparshme. Duke përdorur materialet e mësimit, implementoni në të theksimin e lidhjes aktive për listën e studentëve në mënyrë që të jetë e qartë të dhënat e cilit student përdoruesi po i shikon aktualisht.