📚 Artikel 9 dari 16 — Seri Belajar React

Pindah-Pindah Halaman:
Praktikum React Router DOM dari Nol

Belajar navigasi multi-halaman di React pakai React Router DOM — dari konsep dasar sampai nested routes, lengkap dengan kode yang bisa langsung kamu jalankan.

#ReactRouterDOM #RoutingHalaman #BelajarReact #ZeroToZorro #ReactPemula

⏱️ 12

menit baca

🟢

Level Pemula

2026

Diperbarui

Pernah nggak kamu ngunjungi sebuah website dan sadar kalau URL-nya berubah setiap kali kamu klik menu — tapi halamannya nggak reload sama sekali? Rasanya mulus banget, kayak pakai aplikasi native. Nah, itulah sihir React Router DOM. Kalau kamu sedang belajar React Router DOM routing halaman, kamu lagi berada di salah satu topik terpenting dalam ekosistem React.

Di artikel ke-9 dari Seri Belajar React: React from Zero to Zorro ini, kita bakal praktek langsung bikin navigasi multi-halaman yang smooth, mulai dari install library-nya sampai bikin nested routes. Siap? Kita mulai! 🚀

📌 Definisi Penting

React Router DOM adalah library yang memungkinkan React mengelola navigasi antar halaman secara client-side — artinya perpindahan halaman terjadi di browser tanpa memuat ulang file HTML dari server. Hasilnya? Navigasi yang super cepat dan pengalaman pengguna yang mulus seperti aplikasi mobile.

🗺️ Apa Itu Routing dan Kenapa React Router DOM Dibutuhkan?

Bayangkan kamu masuk ke sebuah mall besar. Setiap toko punya alamat — lantai 1 toko A, lantai 2 toko B. Kamu bisa langsung pergi ke toko manapun tanpa harus memutar ulang dari pintu utama setiap kali. Nah, routing di React bekerja persis seperti itu. Setiap URL adalah "alamat" yang menunjuk ke komponen tertentu.

Masalahnya, React sendiri hanyalah library untuk membangun UI — bukan framework yang sudah dilengkapi sistem routing. Di sinilah React Router DOM routing halaman masuk sebagai solusinya. Library ini menjadi standar industri untuk navigasi di aplikasi React.

🔥 FAKTA MENARIK

React Router DOM adalah library React ketiga paling banyak diunduh di npm — dengan lebih dari 12 juta unduhan per minggu. Hampir setiap project React nyata di dunia kerja menggunakannya. Belajar ini berarti kamu makin siap kerja!

📊 Perbandingan: Routing Tradisional vs React Router DOM

Aspek	Routing Tradisional (MPA)	React Router DOM (SPA)
Kecepatan Navigasi	🐢 Lambat (reload penuh)	⚡ Sangat cepat (tanpa reload)
Pengalaman Pengguna	Terasa putus-putus	Mulus seperti aplikasi
State Tetap Ada	❌ Hilang setiap pindah halaman	✅ Bisa dipertahankan
Performa Awal	✅ Lebih ringan di awal	⚡ Sedikit lebih berat tapi bisa dioptimasi

⚙️ Instalasi dan Setup React Router DOM

Sebelum bisa pakai React Router DOM routing halaman, kamu perlu menginstalnya terlebih dahulu. Pastikan kamu sudah punya project React (misalnya pakai Vite atau Create React App). Ikuti langkah berikut:

Install library-nya lewat npm

Buka terminal di folder project kamu, lalu jalankan perintah berikut:

        $ npm install react-router-dom
      

Bungkus aplikasi dengan BrowserRouter di main.jsx

Buka file src/main.jsx dan tambahkan BrowserRouter:

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App.jsx'
 
ReactDOM.createRoot(document.getElementById('root'))
  .render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
  )

Definisikan routes di App.jsx

Gunakan Routes dan Route untuk memetakan URL ke komponen:

// src/App.jsx
import { Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import Contact from './pages/Contact'
 
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  )
}
 
export default App

💡 TIPS

Biasakan membuat folder src/pages/ khusus untuk komponen halaman dan src/components/ untuk komponen yang digunakan ulang. Struktur folder yang rapi = proyek yang mudah di-maintain!

🔗 Link, NavLink, dan useNavigate — Navigasi yang Sesungguhnya

Setelah route didefinisikan, kamu perlu cara untuk berpindah antar halaman. Di React Router DOM routing halaman, ada tiga cara utama untuk melakukan ini, dan masing-masing punya kegunaan yang berbeda.

🔍 Analisis: Kapan Pakai Yang Mana?

<Link to="/about">

Pengganti tag <a href> biasa. Digunakan untuk navigasi di dalam konten artikel, tombol, atau tautan umum. Tidak menyebabkan reload halaman.

<NavLink to="/about">

Seperti Link, tapi otomatis menambahkan class active saat URL cocok. Sempurna untuk menu navigasi yang perlu menunjukkan halaman aktif.

useNavigate()

Hook untuk navigasi secara programatik. Cocok untuk redirect setelah submit form, login berhasil, atau tindakan lainnya yang membutuhkan navigasi dari dalam logika JavaScript.

Contoh komponen Navbar menggunakan NavLink:

// src/components/Navbar.jsx
import { NavLink } from 'react-router-dom'
 
function Navbar() {
  return (
    <nav>
      <NavLink to="/" end>Home</NavLink>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/contact">Contact</NavLink>
    </nav>
  )
}
 
export default Navbar

⚠️ PERHATIAN

Jangan pernah pakai tag <a href="..."> biasa untuk navigasi internal di React. Ini akan menyebabkan halaman reload penuh dan menghancurkan semua keuntungan SPA yang sudah kamu bangun!

🏗️ Dynamic Routes dan useParams — Halaman yang Lebih Pintar

Bayangkan kamu membangun blog. Kamu punya 100 artikel, tapi tidak mungkin kamu mendefinisikan 100 route secara manual, kan? Di sinilah dynamic routing dalam React Router DOM routing halaman menyelamatkan kamu. Kamu cukup definisikan satu route dengan parameter dinamis.

Definisikan dynamic route dengan titik dua (:)

// Di App.jsx, tambahkan route ini:
<Route path="/blog/:id" element={<BlogDetail />} />
// :id akan cocok dengan /blog/1, /blog/react-dasar, dll

Ambil nilai parameter dengan hook useParams()

// src/pages/BlogDetail.jsx
import { useParams } from 'react-router-dom'
 
function BlogDetail() {
  const { id } = useParams()
 
  return (
    <div>
      <h1>Artikel dengan ID: {id}</h1>
    </div>
  )
}
 
export default BlogDetail

⚡ INSIGHT PENTING

React Router DOM versi 6 ke atas sudah sangat berbeda dari versi 5. Kalau kamu menemukan tutorial lama yang masih pakai Switch, itu adalah sintaks versi lama. Di v6+, Switch diganti dengan Routes.

📦 Nested Routes & Layout — Struktur Halaman yang Profesional

Fitur paling powerful dari React Router DOM routing halaman adalah nested routes (routes bersarang). Analoginya seperti sebuah gedung perkantoran: gedung (layout utama) tetap sama, hanya isi ruangan (konten halaman) yang berganti. Header dan sidebar kamu bisa tetap terlihat sementara hanya area konten yang berubah.

// App.jsx — contoh nested routes dengan layout
<Routes>
  <Route path="/" element={<MainLayout />}>
    {/* Child routes — akan tampil di <Outlet /> */}
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="blog/:id" element={<BlogDetail />} />
  </Route>
</Routes>
 
// Di MainLayout.jsx, tambahkan <Outlet /> tempat konten muncul:
import { Outlet } from 'react-router-dom'
 
function MainLayout() {
  return (
    <div>
      <Navbar />
      <main><Outlet /></main>
      <Footer />
    </div>
  )
}

⚡ INSIGHT PENTING

Komponen <Outlet /> adalah kunci dari nested routes. Anggap saja ini sebagai "lubang" di layout yang akan diisi oleh child route yang sedang aktif. Tanpa Outlet, child routes tidak akan pernah muncul!

✅ KESIMPULAN

Kamu Sudah Jago Routing, Jago Juga!

Di artikel ini kamu sudah belajar hal-hal penting tentang React Router DOM routing halaman:

📌 Apa itu routing dan kenapa React butuh library eksternal seperti React Router DOM

⚙️ Cara install dan setup BrowserRouter, Routes, dan Route

🔗 Perbedaan Link, NavLink, dan useNavigate beserta kapan menggunakannya

🏗️ Dynamic routes dengan useParams() untuk halaman dinamis seperti blog

📦 Nested routes dengan Outlet untuk struktur layout yang profesional

Sekarang giliran kamu untuk mencoba sendiri! Bikin project kecil dengan 3-4 halaman dan praktikkan semua yang sudah kamu pelajari. Jangan lupa share hasilnya di kolom komentar ya — saya penasaran dengan kreasi kamu! 👇

📚 Lihat Semua Artikel Seri 💬 Tulis Komentar

🏷️ Tags Artikel

#ReactRouterDOM #RoutingHalaman #BelajarReact #ZeroToZorro #ReactPemula #SPA #NestedRoutes #useParams #Tutorial2026

📚 Seri Artikel Ini Bagian Dari

🦸

Daftar Isi Lengkap

Seri Belajar React: React from Zero to Zorro

16 Artikel — Dari Dasar Sampai Mahir · Kamu ada di artikel ke-9

Lihat Semua →

🧭 Navigasi Artikel

← Artikel Sebelumnya

Bikin Form yang Proper: Controlled Component dan Validasi Input di React