CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

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.)

Başlangıç kodu

App.jsx
// NavBar bileşenini buraya yaz

Örnek çözüm

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

export default NavBar;

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 Hangisi aktif rotada sınıf ekler?

  • Route
  • Link
  • BrowserRouter
  • NavLink Doğru cevap

Açıklama: NavLink aktif rotada sınıf ekler.

2 Link prop

Soru 
Link ve NavLink'in ortak prop'u ____.
Cevap 
Link ve NavLink'in ortak prop'u to.

Açıklama: Ortak prop 'to'dur.

3 Link ve NavLink'i eşleştir

Kavram Anlamı
Link sade
NavLink aktif vurgu
to prop
.active CSS

Orta seviye bölümündeki tüm dersler

1 Custom hook temelleri

  1. Custom hook nedir?
  2. useToggle
  3. usePrevious
  4. Özet - Custom hook temelleri

2 İleri custom hook'lar

  1. useLocalStorage
  2. useFetch
  3. useDebounce
  4. Özet - İleri custom hook'lar

3 Context derin

  1. Context ayrımı
  2. Context + useReducer
  3. Varsayılan değer ve hata
  4. Özet - Context derin

4 useReducer kalıbı

  1. Reducer kalıbı
  2. Aksiyon tipleri
  3. Kompozisyon
  4. Özet - useReducer kalıbı

5 Sepet yönetimi

  1. Proje: Sepet yönetimi
  2. Sepet reducer
  3. Sepet context
  4. Ürün ekleme UI

6 useMemo

  1. useMemo nedir?
  2. Bağımlılık kontrolü
  3. Dikkat noktaları
  4. Özet - useMemo

7 useCallback

  1. useCallback nedir?
  2. Kardeş bileşen yeniden çizimi
  3. useMemo vs useCallback
  4. Özet - useCallback

8 React.memo

  1. React.memo nedir?
  2. Prop karşılaştırma
  3. Özel karşılaştırıcı
  4. Özet - React.memo

9 Performans projesi

  1. Proje: Performans
  2. Pahalı hesap
  3. Sabit handler
  4. Memo'lu liste

10 Router temelleri

  1. React Router nedir?
  2. Rota tanımlama
  3. Link ve NavLink
  4. Özet - Router temelleri

11 İleri router

  1. URL parametreleri
  2. İç içe rotalar
  3. Programlı yönlendirme
  4. Özet - İleri router

12 Çok sayfalı uygulama

  1. Proje: Çok sayfalı uygulama
  2. Layout ve router
  3. Liste ve detay
  4. Yönlendirme ve 404

13 Layout bileşenleri

  1. Layout deseni
  2. Sidebar ve header
  3. Outlet ile layout
  4. Özet - Layout bileşenleri

14 Error boundary

  1. Error boundary nedir?
  2. Sınıf bileşeni yapısı
  3. Yedek arayüz
  4. Özet - Error boundary

15 Suspense ve lazy

  1. React.lazy nedir?
  2. Suspense sınırı
  3. Çoklu sınır
  4. Özet - Suspense ve lazy

16 Portal

  1. Portal nedir?
  2. Modal örneği
  3. Olay yayılımı
  4. Özet - Portal

17 İleri useRef

  1. useRef ve hesaplama
  2. Ölçüm yapma
  3. forwardRef
  4. Özet - İleri useRef

18 RTL testleri

  1. React Testing Library
  2. render ve screen
  3. Olay tetikleme
  4. Özet - RTL testleri

19 Panel projesi

  1. Proje: Panel
  2. Layout ve rota
  3. İstatistik widget'ı
  4. Modal ile ekleme

20 Orta seviye finali

  1. Meydan okuma: useFetch hook
  2. Meydan okuma: Tema sağlayıcı
  3. Meydan okuma: Memo'lu liste
  4. Meydan okuma: Rotalı sepet