React Router'da Aktif Bağlantıyı Vurgulama

Uygulamamıza birkaç ürün eklediğimizi ve her bir ürünü incelediğimizi varsayalım. Şu anda hangi ürünün sayfasında olduğumuzu nasıl anlayabiliriz? Haydi bu ürünü listede örneğin kalın yazı tipi ve kahverengi renkle vurgulayalım, eğer bağlantı hala yükleniyorsa gri renkte gösterelim.

Başlamak için ana sayfaya gidin, listeye 4 ürün ekleyin ve her biri için verileri girin. Onlara istediğiniz isimleri verin.

Aktif bağlantıyı vurgulamada bize NavLink bileşeni yardımcı olacak, bu, verilerin durumunu bilen Link bileşeninin bir alt türüdür. Genellikle bir gezinme menüsü oluşturulurken kullanılır.

Hadi root.jsx dosyasını açalım ve NavLink'i içe aktaralım (Link içe aktarımını kaldırmayı unutmayın, yoksa React hata verebilir, çünkü artık onu kullanmıyoruz):

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

Ardından şablonda Link bileşenini NavLink ile değiştirelim:

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

Ona className prop'unu ekleyelim ve ayrıca koşullu mantık kullanalım. Eğer sayfa yüklendiyse, bağlantı aktif duruma geçecek, eğer yükleniyorsa, yükleme durumuna geçecek, eğer hiçbir şey olmuyorsa, olduğu gibi kalacak. Buna bağlı olarak bağlantının sınıfı değişecek:

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

CSS dosyamıza active ve loading sınıfları için stil eklemek kaldı:

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

a.loading {
	color: gray;
}

Hazır! Şimdi listedeki ürünlere tıklayın.

Önceki derslerin görevlerinde oluşturduğunuz uygulamayı alın. Ders materyallerinden yararlanarak, öğrenci listesi için aktif bağlantı vurgulamasını, kullanıcının şu anda hangi öğrencinin verilerini görüntülediğinin anlaşılmasını sağlayacak şekilde uygulayın.