Friday, May 29, 2026

react router

📚 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

Artikel 8 dari 16 →

Artikel Selanjutnya →

Manajemen State Lebih Serius: useContext dan useReducer untuk Aplikasi yang Makin Kompleks

Artikel 10 dari 16 →

react project akhir

Artikel 16 dari 16 · Seri Belajar React

Project Akhir: Bangun Aplikasi
Full-Feature React
dari Nol Sampai Deploy!

Saatnya semua ilmu dari 15 artikel sebelumnya dibuktikan. Kita bangun satu aplikasi React CRUD nyata, lalu deploy ke Vercel atau Netlify — sekarang juga.

#ReactCRUD #DeployVercel #Netlify #ZeroToZorro

⏱ 20

Menit Baca

🎯 Pemula

Level

📅 2026

Updated

Pernah nggak kamu nonton tutorial React berjam-jam, hafal teori, paham konsep — tapi begitu disuruh bikin aplikasi sendiri, langsung blank? Kalau pernah, tenang. Ini artikel terakhir dari Seri Belajar React: React From Zero to Zorro, dan kita akan menutupnya dengan cara paling epic: bikin project React CRUD lengkap, lalu deploy ke Vercel atau Netlify supaya dunia bisa lihat hasil kerja kerasmu.

Nggak ada teori kosong di sini. Semua yang kita bahas — dari setup project sampai tombol deploy — bisa langsung kamu praktikkan sekarang. Siap? Gas! 🚀

Apa Itu Project React CRUD dan Kenapa Ini Penting Banget?

Bayangkan sebuah toko buku. Pemiliknya butuh bisa menambah buku baru, melihat daftar buku, mengedit informasi harga, dan menghapus buku yang sudah habis stok. Itulah CRUD — Create, Read, Update, Delete — empat operasi fundamental yang jadi pondasi hampir semua aplikasi web di dunia nyata.

📌 Formula Inti

      CRUD = Create (tambah) + Read (baca) + Update (edit) + Delete (hapus)

      → Aplikasi React CRUD = komponen UI + state management + deploy ke publik

Kalau kamu bisa bikin aplikasi React CRUD yang berfungsi penuh dan bisa diakses siapa saja lewat internet, itu artinya kamu sudah melewati garis batas dari "belajar React" menjadi "bisa React". Perbedaan yang tidak kecil di mata rekruter maupun klien freelance.

🔥

Fakta Menarik

Menurut Stack Overflow Developer Survey 2024, React masih menjadi framework JavaScript paling populer — dipakai lebih dari 39% developer aktif di seluruh dunia. Project CRUD React di portfolio-mu bukan sekadar latihan, tapi sinyal nyata ke rekruter bahwa kamu serius.

Arsitektur Aplikasi: Apa yang Akan Kita Bangun?

Kita akan membangun Task Manager App — aplikasi manajemen tugas sederhana yang punya semua fitur CRUD. Kenapa task manager? Karena sederhana nggak berarti membosankan — fiturnya cukup untuk menunjukkan kemampuanmu, tapi tidak terlalu kompleks hingga bikin kamu nyerah di tengah jalan.

Fitur	Komponen React	Operasi CRUD
Tambah tugas baru	`TaskForm`	CREATE
Tampilkan daftar tugas	`TaskList`	READ
Edit detail tugas	`EditModal`	UPDATE
Hapus tugas	`TaskItem`	DELETE

🛠️ Langkah Setup Project

Buat Project dengan Vite

Gunakan Vite karena jauh lebih cepat dibanding Create React App (CRA) yang sudah deprecated.

Terminal

npm create vite@latest task-manager -- --template react
cd task-manager
npm install

Install Dependencies Tambahan

Kita pakai uuid untuk ID unik dan react-hot-toast untuk notifikasi yang kece.

npm install uuid react-hot-toast

Buat Struktur Folder yang Rapi

src/
├── components/
│   ├── TaskForm.jsx
│   ├── TaskList.jsx
│   ├── TaskItem.jsx
│   └── EditModal.jsx
├── hooks/
│   └── useTasks.js
├── App.jsx
└── main.jsx

💡

Tips Struktur Folder

Pisahkan logika state ke custom hook useTasks.js. Komponen-mu jadi lebih bersih dan mudah di-debug. Ini adalah praktik nyata yang dipakai di perusahaan teknologi besar.

Membangun Fitur CRUD Lengkap di React

Sekarang bagian serunya. Kita mulai dari custom hook yang menjadi "otak" aplikasi, lalu susun komponen satu per satu seperti merakit Lego.

Custom Hook: useTasks.js

Semua logika CRUD dikumpulkan di sini. Gunakan localStorage agar data tidak hilang saat di-refresh.

src/hooks/useTasks.js

import { useState, useEffect } from 'react';
import { v4 as uuidv4 } from 'uuid';

export function useTasks() {
  const [tasks, setTasks] = useState(() => {
    const saved = localStorage.getItem('tasks');
    return saved ? JSON.parse(saved) : [];
  });

  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  // CREATE
  const addTask = (title) => {
    setTasks(prev => [...prev, { id: uuidv4(), title, done: false }]);
  };

  // UPDATE
  const updateTask = (id, newTitle) => {
    setTasks(prev => prev.map(t => t.id === id ? {...t, title: newTitle} : t));
  };

  // DELETE
  const deleteTask = (id) => {
    setTasks(prev => prev.filter(t => t.id !== id));
  };

  return { tasks, addTask, updateTask, deleteTask };
}

Komponen TaskForm.jsx — Fitur Create

src/components/TaskForm.jsx

import { useState } from 'react';

export function TaskForm({ onAdd }) {
  const [input, setInput] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!input.trim()) return;
    onAdd(input);
    setInput('');
  };

  return (
    <form onSubmit={handleSubmit} style={{display:'flex', gap:'8px'}}>
      <input
        value={input}
        onChange={e => setInput(e.target.value)}
        placeholder="Tambah tugas baru..."
      />
      <button type="submit">Tambah</button>
    </form>
  );
}

⚡

Insight Penting: Controlled vs Uncontrolled Component

Pola value + onChange pada input di atas disebut controlled component — React yang pegang kendali state, bukan DOM. Ini best practice yang bikin form kamu predictable dan mudah di-test.

Deploy Project React CRUD ke Vercel atau Netlify: Panduan Lengkap

Aplikasi sudah jalan di laptop? Keren. Tapi kalau cuma jalan di laptopmu sendiri, itu artinya belum selesai. Deploy ke Vercel atau Netlify akan membuat proyekmu punya URL publik — dan itu yang akan kamu cantumkan di portfolio dan LinkedIn.

⚖️ Vercel vs Netlify — Mana yang Lebih Cocok untuk Kamu?

▲ Vercel

Optimasi khusus Next.js & React
Preview URL otomatis setiap PR
Deploy hanya dengan git push
Analytics bawaan yang kece
Best for: React murni & Next.js

◆ Netlify

Form handling bawaan (tanpa backend)
Serverless Functions mudah dikonfigurasi
UI dashboard yang lebih intuitif untuk pemula
Plugin ekosistem yang kaya
Best for: Static site & form submission

💬 Rekomendasi untuk project React CRUD ini: pakai Vercel — setup paling cepat, zero config.

🚀 Deploy ke Vercel (3 Cara Super Mudah)

Push ke GitHub Dulu

Vercel bekerja langsung dari repository GitHub-mu. Pastikan proyekmu sudah ada di sana.

git init
git add .
git commit -m "feat: initial task manager app"
git remote add origin https://github.com/username/task-manager.git
git push -u origin main

Import Project di Vercel Dashboard

Buka vercel.com → Login dengan GitHub
Klik "Add New Project"
Pilih repo task-manager
Vercel otomatis detect Vite — langsung klik "Deploy"
Tunggu ~30 detik... ✅ Selesai!

Atau Pakai Vercel CLI (Buat yang Suka Terminal)

npm install -g vercel
vercel
# Ikuti promptnya → dalam hitungan detik, URL live sudah di tangan!

⚠️

Perhatian: Build Command Vite

Saat deploy di Vercel atau Netlify, pastikan build command diisi npm run build dan output directory adalah dist (bukan build seperti CRA). Kalau salah, deploy akan gagal!

🟢 Alternatif: Deploy ke Netlify via Drag & Drop

Cara Termudah — Tanpa GitHub Sekalipun!

Jalankan npm run build di terminal
Akan muncul folder dist/
Buka app.netlify.com → drag-and-drop folder dist ke halaman deploy
Selesai! URL langsung aktif dalam hitungan detik 🎉

💡

Pro Tip: Custom Domain Gratis di Vercel

Vercel memberikan subdomain gratis dengan format nama-project.vercel.app. Kalau punya domain sendiri, kamu bisa connect ke sana secara gratis juga — langsung dari dashboard tanpa konfigurasi server yang ribet.

🎓

Selamat! Kamu Sudah Jadi Zorro-nya React

Kita sudah menyelesaikan perjalanan panjang — dari memahami JSX, props, state, hooks, routing, testing, sampai akhirnya membangun dan men-deploy project React CRUD ke Vercel atau Netlify. Ini bukan sekadar artikel — ini adalah bukti bahwa kamu sudah melewati React From Zero to Zorro.

✅ Struktur Project Vite ✅ Custom Hook CRUD ✅ Deploy Vercel & Netlify ✅ Portfolio-Ready App

💬 Punya pertanyaan? Sudah berhasil deploy? Ceritakan pengalamanmu di kolom komentar di bawah! Dan kalau artikel ini membantu, jangan pelit — share ke teman-teman yang lagi berjuang belajar React juga ya. 🙌

📚 Lihat Semua Artikel Seri ← Artikel Sebelumnya

Tags Artikel

#BelajarReact #ZeroToZorro #ReactCRUD #DeployVercel #Netlify #ProjectAkhirReact #PembuatAplikasiWeb #Vite #CustomHook #FullFeatureApp

📚

Seri Belajar React: React From Zero to Zorro

Semua 16 artikel tersusun rapi — mulai dari dasar sampai deploy!

👉 Lihat Daftar Isi Lengkap Seri

saifiahmada.com/2026/05/react-from-zero-to-zorro.html

Artikel ini adalah bagian ke-16 (terakhir) dari seri komprehensif belajar React untuk pemula. Mulai dari artikel 1 tentang pengenalan React hingga artikel 16 ini tentang project CRUD deploy, semuanya dirancang agar kamu bisa belajar secara sistematis dan terstruktur.

Navigasi Artikel

← Artikel Sebelumnya

Testing Biar Kode Makin Kokoh: Praktikum React Testing Library dan Jest

Artikel 15

🎉

Kamu sudah di artikel terakhir!

Seri React From Zero to Zorro selesai.

node.js from zero to zorro

react router

Pindah-Pindah Halaman:
Praktikum React Router DOM dari Nol

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

⚙️ Instalasi dan Setup React Router DOM

🔗 Link, NavLink, dan useNavigate — Navigasi yang Sesungguhnya

🏗️ Dynamic Routes dan useParams — Halaman yang Lebih Pintar

📦 Nested Routes & Layout — Struktur Halaman yang Profesional

Kamu Sudah Jago Routing, Jago Juga!

react project akhir

Project Akhir: Bangun Aplikasi
Full-Feature React
dari Nol Sampai Deploy!

Apa Itu Project React CRUD dan Kenapa Ini Penting Banget?

Arsitektur Aplikasi: Apa yang Akan Kita Bangun?

🛠️ Langkah Setup Project

Membangun Fitur CRUD Lengkap di React

Deploy Project React CRUD ke Vercel atau Netlify: Panduan Lengkap

🚀 Deploy ke Vercel (3 Cara Super Mudah)

🟢 Alternatif: Deploy ke Netlify via Drag & Drop

Selamat! Kamu Sudah Jadi Zorro-nya React

java php laravel linux mysql sql bootstrap html css query

node.js from zero to zorro

react router

Pindah-Pindah Halaman: Praktikum React Router DOM dari Nol

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

⚙️ Instalasi dan Setup React Router DOM

🔗 Link, NavLink, dan useNavigate — Navigasi yang Sesungguhnya

🏗️ Dynamic Routes dan useParams — Halaman yang Lebih Pintar

📦 Nested Routes & Layout — Struktur Halaman yang Profesional

Kamu Sudah Jago Routing, Jago Juga!

react project akhir

Project Akhir: Bangun Aplikasi Full-Feature React dari Nol Sampai Deploy!

Apa Itu Project React CRUD dan Kenapa Ini Penting Banget?

Arsitektur Aplikasi: Apa yang Akan Kita Bangun?

🛠️ Langkah Setup Project

Membangun Fitur CRUD Lengkap di React

Deploy Project React CRUD ke Vercel atau Netlify: Panduan Lengkap

🚀 Deploy ke Vercel (3 Cara Super Mudah)

🟢 Alternatif: Deploy ke Netlify via Drag & Drop

Selamat! Kamu Sudah Jadi Zorro-nya React

java php laravel linux mysql sql bootstrap html css query

Pindah-Pindah Halaman:
Praktikum React Router DOM dari Nol

Project Akhir: Bangun Aplikasi
Full-Feature React
dari Nol Sampai Deploy!