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 />} />
    <Route path="dashboard" element={<Dashboard />} />
  </Route>
</Routes>
 
// di Layout.jsx
<nav /> <Outlet />

Loader (data route)

jsx

const router = createBrowserRouter([
  {
    path: '/user/:id',
    loader: async ({ params }) => fetchUser(params.id),
    element: <User />,
  },
]);

Protected route

jsx

function RequireAuth({ children }) {
  const user = useAuth();
  return user ? children : <Navigate to="/login" />;
}
<Route path="/admin" element={<RequireAuth><Admin /></RequireAuth>} />

Struktur alur

Catatan implementasi

• <Outlet> wajib di parent agar child nested tampil.
• Loader jalan sebelum render; akses lewat useLoaderData().
• Guard cukup komponen pembungkus + <Navigate>; tidak perlu library ekstra.
• Untuk SPA tanpa server, simpan token di memori + refresh token di cookie aman.

Kesalahan umum

• Lupa <Outlet>: child tidak muncul.
• Loader mutasi global: data sebaiknya dikembalikan, bukan disimpan side-effect.
• Guard redirect loop: kondisi auth salah, bolak-balik login.
• Param typo: :id vs :userId tidak cocok.

Referensi terkait

• React State Management: Local, Lifted, Context, External
• Next.js Routing, Server/Client, Data Fetching
• Laravel Auth, Guards, Gates, Policies