Nested Route & Layout Route (<Outlet />)

Nested Route membagikan Layout luar yang sama (seperti Header & Sidebar) dan merender isi anak di dalam komponen <Outlet />.

👀 Contoh dulu

function DashboardLayout() {
  return (
    <div>
      <Sidebar />
      <Outlet /> {/* Isi Halaman Anak */}
    </div>
  );
}

Hasilnya: Sidebar tidak di-render ulang saat berpindah antar tab dashboard.

💡 Outlet adalah tempat komponen anak dirender di dalam layout parent.

📝 Sekarang giliranmu

Render elemen placeholder khusus dari React Router DOM di dalam komponen layout agar konten rute anak (child route) dapat ditampilkan.

Preview