Link ve NavLink

Link ile sayfa değiştirmeyi ve NavLink ile aktif durumu öğrenirsin.

Link ve NavLink

<Link to="..."> React Router'ın temel navigasyon bileşenidir. Tıklayınca URL'i değiştirir; sayfa yenilenmez.

<NavLink to="..."> Link'in özel bir halidir. Aktif rotada olduğunda className'e active sınıfı ekler. Bu, menüde aktif öğeyi vurgulamak için idealdir.

İkisi de to prop'u alır. Link sade navigasyon, NavLink ise aktif vurgu için kullanılır. Stil vermek istediğin menülerde NavLink tercih edilir.

Menü örneği

Bir navigasyon menüsü için NavLink idealdir. <nav><NavLink to="/">Ana sayfa</NavLink><NavLink to="/about">Hakkında</NavLink></nav>.

Aktif rotada NavLink otomatik olarak class="active" alır. CSS ile .active { '{ font-weight: bold; }' } yazarsan aktif öğe kalın görünür.

Bu desen, kullanıcıya hangi sayfada olduğunu göstermenin en temiz yollarından biridir. Kod karmaşası olmadan erişilebilir bir menü elde edilir.

Uygulama Menü yaz

Aşağıdaki iskeleti tamamla. NavBar bileşeni yaz. <nav> içinde iki NavLink olsun: <NavLink to="/">Ana sayfa</NavLink> ve <NavLink to="/about">Hakkında</NavLink>. Dışa aktar. (NavLink'in ithal edildiğini varsay.)

Örnek çözümü göster

function NavBar() {
  return (
    <nav>
      <NavLink to="/">Ana sayfa</NavLink>
      <NavLink to="/about">Hakkında</NavLink>
    </nav>
  );
}

export default NavBar;

Kendini test et

Hangisi aktif rotada sınıf ekler?
- Route
- Link
- BrowserRouter
- NavLink
Cevabı göster

NavLink — NavLink aktif rotada sınıf ekler.

Link prop

Link ve NavLink'in ortak prop'u ____.

Cevabı göster

Link ve NavLink'in ortak prop'u to.

Link ve NavLink'i eşleştir

Link

sade
NavLink

aktif vurgu
to

prop
.active

CSS

Sıradaki ders: Özet - Router temelleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler