Aktyvios nuorodos paryškinimas React Router

Tarkime, pridėjome keletą produktų į mūsų programą ir peržiūrime kiekvieną produktą. Kaip mums suprasti, kuriame produkto puslapyje dabar esame? Paryškinkime šį produktą sąraše, pavyzdžiui, paryškintu šriftu ir ruda spalva, o jei nuoroda vis dar kraunasi, tai pilka.

Pirmiausia nueikite į pagrindinį puslapį, pridėkite į sąrašą 4 produktus ir kiekvienam iš jų įveskite duomenis. Duokite jiems bet kokius pavadinimus.

Aktyvios nuorodos paryškinime mums padės komponentas NavLink, tai yra komponento Link variantas, kurs žino apie duomenų būseną. Paprastai jis naudojamas kurdami navigacijos meniu.

Atidarykime root.jsx ir importuokime NavLink (nepamirškite pašalinti importo Link, kitaip React gali pykti, juk jo daugiau nenaudojame):

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

Tada makete pakeiskime komponentą Link į NavLink:

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

Ir pridėkime jam propą className, o taip pat panaudokime sąlyginę logiką. Jei puslapis įkeltas, tai nuoroda pereis į aktyvią būseną, jei kraunasi, taip į įkėlimo būseną, jei nieko ne vyksta, tai liks tokia pat. Priklausomai nuo to bus keičiama nuorodos klasė:

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

Mums belieka pridėti stilių active ir loading klasių į mūsų css failą:

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

a.loading {
	color: gray;
}

Paruošta! O dabar spustelėkite produktus sąraše.

Paimkite programą, kurią sukūrėte užduotyse ankstesnėse pamokose. Naudodamiesi pamokos medžiaga, įgyvendinkite joje aktyvios nuorodos paryškinimą studentų sąrašui taip, kad būtų suprantama, kurių studento duomenis vartotojas dabar žiūri.