Actieve link markeren in React Router
Stel, we hebben meerdere producten toegevoegd aan onze applicatie en bekijken elk van de producten. Hoe kunnen we dan begrijpen op de pagina van welk product we ons momenteel bevinden? Laten we dit product in de lijst markeren, bijvoorbeeld met een vet lettertype en een bruine kleur, en als de link nog aan het laden is, dan in grijs.
Ga eerst naar de homepage,
voeg 4 producten toe aan de lijst
en voer voor elk daarvan gegevens in.
Geef ze willekeurige namen.
Bij het markeren van de actieve link zal de
component NavLink ons helpen,
dit is een variant van de
component Link, die op de hoogte is
van de status van de gegevens. Meestal wordt hij gebruikt
bij het maken van een navigatiemenu.
Laten we root.jsx openen en
NavLink importeren
(vergeet niet de import van
Link te verwijderen, anders kan React gaan klagen,
omdat we hem niet meer gebruiken):
import { NavLink } from 'react-router-dom';
Vervang vervolgens in de layout de component
Link door NavLink:
<NavLink key={product.id} to={`products/${product.id}`}>
{product.name ? product.name : <i>unnamed</i>}
</NavLink>
En voeg de prop className toe, en
gebruik ook conditionele logica. Als
de pagina is geladen, gaat de link
in de actieve status, als hij aan het laden is,
dan in de laadstatus, en als er niets
gebeurt, blijft hij zoals hij was. Afhankelijk
hiervan zal
de klasse van de link veranderen:
<NavLink
key={product.id}
to={`products/${product.id}`}
className={({ isActive, isPending }) =>
isActive ? 'active' : isPending ? 'loading' : ''
}
>
{product.name ? product.name : <i>Unnamed</i>}
</NavLink>
Het enige wat ons nog rest is stijlen toe te voegen voor
de active en loading
klassen in ons css-bestand:
a.active {
font-weight: bold;
color: brown;
}
a.loading {
color: gray;
}
Klaar! En klik nu op de producten in de lijst.
Neem de applicatie die je hebt gemaakt in de opdrachten bij de vorige lessen. Gebruikmakend van de lesmaterialen, implementeer daarin het markeren van de actieve link voor de lijst van studenten, zodat het duidelijk is van welke student de gebruiker op dit moment de gegevens bekijkt.
