Markera aktiv länk i React Router

Anta att vi har lagt till några produkter i vår applikation och visar var och en av produkterna. Hur kan vi veta på vilken produktsida vi för närvarande befinner oss? Låt oss markera den här produkten i listan, till exempel med fetstil och brun färg, och om länken fortfarande laddas, med grå färg.

Börja med att gå till hemsidan, lägg till 4 produkter i listan och ange data för var och en av dem. Ge dem valfria namn.

För att markera den aktiva länken kommer komponenten NavLink att hjälpa oss, det är en variant av komponenten Link som känner till data tillstånd. Den används vanligtvis när navigeringsmenyer skapas.

Låt oss öppna root.jsx och importera NavLink (kom ihåg att ta bort importen av Link, annars kan React klaga, för vi använder den inte längre):

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

Ersätt sedan komponenten Link med NavLink i layouten:

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

Och lägg till prop:en className, samt använd villkorslogik. Om sidan har laddats kommer länken att övergå till aktivt tillstånd, om den laddas, till laddningstillstånd, och om inget händer förblir den oförändrad. Beroende på detta kommer länkens klass att ändras:

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

Allt som återstår för oss är att lägga till stilar för active och loading klasserna i vår css-fil:

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

a.loading {
	color: gray;
}

Klart! Klicka nu på produkterna i listan.

Ta applikationen du skapade i uppgifterna till tidigare lektioner. Använd materialet från lektionen och implementera markering av aktiv länk för listan med studenter, så att det är tydligt vilken students data användaren för närvarande tittar på.