React Router Nested Routes Loaders Protected Auth Guard

Definisi

React Router (v6+) mengelola routing deklaratif dengan nested routes (<Outlet>), loaders (data sebelum render), dan guard sederhana untuk route terproteksi.

Kapan dipakai

Pakai saat SPA butuh banyak halaman dengan layout bersarang dan data per-route. Untuk App Router Next.js, polanya berbeda (file-based) — ini untuk SPA murni.

Cara kerja

Nested + Outlet

jsx

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <