0Pricing
React Academy · Ders

İç İçe Rotalar ve Outlet Düzenleri

İç içe ve bileşenlerini kullanarak çok düzeyli rota düzenleri oluşturun.

İç İçe Rotalar ve Outlet Düzenleri, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

İç İçe Rotalar Nedir

React Router v6 içindeki iç içe rotalar, düzenleri birleştirmenizi sağlar: bir üst rota bir iskelet (gezinme çubuğu, kenar çubuğu) görüntüler ve alt rotalar, <Outlet /> aracılığıyla içerik alanını doldurur.

İç İçe Rotaları Tanımlama

Alt <Route> öğelerini yönlendirici yapılandırmanızdaki bir üst <Route> öğesinin içine yerleştiriniz. Üst yol, tüm alt yollar için bir ön ektir.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    children: [
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'settings', element: <Settings /> },
    ],
  },
]);

Outlet Bileşeni

<Outlet />, üst düzen bileşeninde bulunan bir yer tutucudur. React Router, onu eşleşen alt rotanın öğesiyle değiştirir.

function RootLayout() {
  return (
    <div>
      <nav>
        <Link to="/dashboard">Dashboard</Link>
        <Link to="/settings">Settings</Link>
      </nav>
      <main>
        <Outlet /> {/* child route renders here */}
      </main>
    </div>
  );
}

Dizin Rotaları

index: true rotası, üst URL tam olarak eşleştiğinde görüntülenir ve başka hiçbir alt yol eşleşmediğinde varsayılan alt rota görevi görür.

{
  path: '/',
  element: <RootLayout />,
  children: [
    { index: true, element: <Home /> }, // renders at '/'
    { path: 'about', element: <About /> },
  ],
}

Çok Düzeyli İç İçe Yapı

Rotalar birden çok düzeyde iç içe olabilir. Zincirdeki her düzen bileşeni, kendi alt öğeleri için bir <Outlet /> görüntüler.

const router = createBrowserRouter([
  {
    path: '/app',
    element: <AppShell />,
    children: [
      {
        path: 'users',
        element: <UsersLayout />,
        children: [
          { index: true, element: <UserList /> },
          { path: ':id', element: <UserDetail /> },
        ],
      },
    ],
  },
]);

Outlet Context

Bir düzenden iç içe alt rotalara veri aktarmak için <Outlet /> üzerindeki context prop'unu kullanınız; alt rotalarda bu veriyi useOutletContext() ile okuyunuz.

// Parent layout
function UsersLayout() {
  const [selected, setSelected] = useState(null);
  return <Outlet context={{ selected, setSelected }} />;
}

// Child route
function UserDetail() {
  const { selected } = useOutletContext();
  return <div>{selected}</div>;
}

Yolsuz Rotalarla Adlandırılmış Düzenler

path içermeyen bir rota, URL'ye bir bölüm eklemeden yalnızca düzen amacıyla alt rotaları sarar. Rotaları ortak bir düzen altında gruplamak için kullanışlıdır.

{
  element: <AuthenticatedLayout />, // no path
  children: [
    { path: '/profile', element: <Profile /> },
    { path: '/billing', element: <Billing /> },
  ],
}

İç İçe Rotalarda Göreli Bağlantılar

İç içe bir rotanın içinde <Link to='sibling'>, HTML'deki göreli URL'ler gibi geçerli rotanın yoluna göre çözümlenir.

// Inside /app/users — link goes to /app/users/new
function UserList() {
  return <Link to="new">Add User</Link>;
}

İç İçe Rotalarda useMatch

useMatch(pattern), geçerli URL desenle eşleştiğinde eşleşme verilerini döndürür; iç içe düzenlerde etkin bağlantıları biçimlendirmek için kullanışlıdır.

function NavLink({ to, children }) {
  const match = useMatch(to);
  return (
    <Link to={to} className={match ? 'active' : ''}>
      {children}
    </Link>
  );
}

Her Segment İçin Hata Sınırları

Tüm düzen iskeletini çökertmeden yalnızca ilgili segmentteki hataları yakalamak için iç içe herhangi bir rotaya bir errorElement ekleyiniz.

{
  path: 'users',
  element: <UsersLayout />,
  errorElement: <UsersError />,
  children: [
    { path: ':id', element: <UserDetail /> },
  ],
}

Uygulamalı Örnek: Gösterge Paneli Düzeni

Tipik bir gösterge paneli, uygulama iskeleti (üst bilgi + kenar çubuğu) için üst düzey bir rota ve her bölüm için iç içe rotalar kullanır. Böylece yalnızca içerik alanı değişirken iskelet yerinde kalır.

function DashboardShell() {
  return (
    <div className="dashboard">
      <Sidebar />
      <div className="content">
        <Outlet />
      </div>
    </div>
  );
}

Kısa Kontrol

Eşleşen alt rotayı görüntülemek için üst düzen hangi bileşeni görüntülemelidir?

Özet

İç içe rotalar, üst rotaların kalıcı düzenler görüntülemesini, alt rotaların ise <Outlet /> alanını doldurmasını sağlar. Varsayılan alt rotalar için dizin rotalarını, ortak düzenler için yolsuz rotaları ve aşağıya veri aktarmak için useOutletContext kullanınız.

Sıkça Sorulan Sorular

“İç İçe Rotalar ve Outlet Düzenleri” dersi ücretsiz mi?

Evet — “İç İçe Rotalar ve Outlet Düzenleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“İç İçe Rotalar ve Outlet Düzenleri” dersinde ne öğreneceğim?

İç içe ve bileşenlerini kullanarak çok düzeyli rota düzenleri oluşturun. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“İç İçe Rotalar ve Outlet Düzenleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. İç İçe Rotalar ve Outlet Düzenleri
  2. Yükleyiciler ve Eylemler (Veri Yönlendirici API'si)
  3. Korumalı Rotalar ve Kimlik Doğrulama Koruyucuları
  4. URL Arama Parametrelerinde Durum Yönetimi
← React Academy Sayfasına Dön