Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pembelajar yang sedang pindah dari “demo satu halaman” ke alur multi-page nyata
• Pemula yang ingin navigasi rapi, bukan route yang berantakan
• Siapa pun yang ingin struktur aplikasi tetap kebaca saat fitur makin banyak

Apa yang akan Anda pelajari

• Dasar React Router dengan mental model yang praktis
• Route params dinamis dan pola nested route
• Cara menyusun pages, layouts, dan route constants dengan bersih

Mengapa topik ini penting

Routing adalah titik di mana arsitektur aplikasi mulai kelihatan jelas. Kalau routing berantakan, seluruh app ikut terasa berantakan.

Routing yang baik bikin user lebih nyaman saat navigasi, dan bikin developer lebih gampang scale codebase. Bab ini membantu Anda menghindari struktur “sementara” yang akhirnya menyulitkan.

Konsep inti

SPA routing

• URL berubah tanpa full page refresh
• Mapping route ke komponen halaman

Di React, route bisa dipikir sebagai state UI yang dipetakan ke URL.

Route params

• Path dinamis seperti /users/:id
• Dipakai untuk halaman detail

Dengan params, satu template halaman bisa melayani banyak data (produk, user, artikel, dll).

Shared layout

• Menjaga header/sidebar/footer konsisten
• Render konten halaman melalui pola outlet

Shared layout mengurangi duplikasi dan menjaga konsistensi UI antar halaman.

Panduan langkah demi langkah

Langkah 1 — Setup router dasar

Buat app shell + route inti (/, /about, dan route fallback).

Langkah 2 — Tambahkan route dinamis

Tambahkan route detail dengan params, lalu baca param itu di dalam halaman.

Langkah 3 — Terapkan arsitektur layout

Bungkus bagian layout yang berulang (header/nav/footer) ke shared layout.

Target bab ini: struktur route yang enak dibaca dan gampang dikembangkan.

Contoh praktis

Contoh 1 — Setup route dasar

<Routes>
  <Route path="/" element={<HomePage />} />
  <Route path="/about" element={<AboutPage />} />
</Routes>

Tip:

• Simpan deklarasi route di satu tempat sejak awal project.

Contoh 2 — Route dinamis

<Route path="/products/:productId" element={<ProductDetailPage />} />

Lanjutan real case:

• Ambil productId, fetch data detail, lalu tangani state loading/error/empty.

Kesalahan umum dan cara menghindarinya

• String route ditulis hardcode di banyak file -> pusatkan route constants
• Route 404 tidak disiapkan -> tambahkan not-found dari awal
• Logic halaman tercampur dengan komponen reusable -> pisahkan batas tanggung jawab
• Folder dibuat terlalu dalam sejak awal -> mulai sederhana, scale bertahap per fitur

Mini Project

• Buat app multi-page dengan:
• halaman Home,
• halaman About,
• halaman Product Detail berbasis params,
• shared layout dengan top navigation,
• halaman 404.

Bonus:

• Tambahkan active-link style supaya user tahu sedang ada di halaman mana.

Latihan cepat

• Tambahkan satu route dengan URL params
• Buat layout wrapper dengan navigasi
• Tambahkan route 404 sederhana
• Buat dan gunakan file routes.ts untuk constants

Ringkasan utama

• Routing itu urusan UX sekaligus arsitektur
• Shared layout menjaga konsistensi halaman dan mengurangi duplikasi
• Organisasi route yang bersih mengurangi beban refactor di masa depan

Langkah berikutnya

Lanjut ke [13. Pola State Management].