Tujuan Pembelajaran

Memahami client-side routing
Bisa menggunakan React Router v6

Analogi

Diagram


      MPA = Tiap halaman reload penuh (seperti pindah rumah)
SPA Routing = Pindah ruangan dalam 1 rumah (tidak reload)

React Router menangani navigasi tanpa page reload di SPA

Penjelasan Konsep

React Router

React Router adalah library de-facto untuk routing di React SPA. Versi 6 (v6) memiliki API yang lebih simpel dan declarative dibanding v5.

Konsep Utama

BrowserRouter — Menggunakan History API untuk URL manipulation.
Routes & Route — Definisikan path dan component yang dirender.
Link & NavLink — Navigasi tanpa page reload.
useParams — Ambil URL parameters.
useNavigate — Programmatic navigation.
Outlet — Render child routes di parent layout.
Nested Routes — Route bersarang untuk layout yang kompleks.

Data API (v6.4+)

Loader — Fetch data sebelum route dirender. Action — Handle form submission. Deferred — Streaming data dengan Suspense.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami client-side routing., dan bisa menggunakan React Router v6. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca React Router, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

React Router menangani navigasi tanpa page reload di SPA. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. createBrowserRouter definisikan routes. Outlet render child. useParams ambil URL param.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

import {
  createBrowserRouter, RouterProvider,
  Route, createRoutesFromElements,
  Link, Outlet, useParams
} from 'react-router-dom';

// DEFINISI ROUTES
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="products" element={<Products />} />
      <Route path="products/:id" element={<ProductDetail />} />
      <Route path="about" element={<About />} />
    </Route>
  )
);

// LAYOUT DENGAN OUTLET
function Layout() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/products">Products</Link>
      </nav>
      <main><Outlet /></main>
    </div>
  );
}

// DYNAMIC SEGMENT
function ProductDetail() {
  const { id } = useParams();
  return <h1>Product {id}</h1>;
}

// RENDER
function App() {
  return <RouterProvider router={router} />;
}

Penjelasan Kode

createBrowserRouter definisikan routes. Outlet render child. useParams ambil URL param.

Prompt AI

Apa bedanya Link dan anchor tag biasa di React Router?

Pertanyaan Reflektif

Buat nested routing dengan layout shared dan dynamic segments.