Tutorial React Dasar Part 6: Navigasi SPA dengan React Router DOM v6

Assalamualaikum Wr. Wb.

Tutorial React Dasar Part 6: Navigasi SPA dengan React Router DOM v6 | Pindah Halaman Instan Tanpa Reload Browser | Pada tutorial Part 1 hingga 5 sebelumnya, aplikasi React yang kita bangun masih berupa satu halaman tunggal. Pada website modern (seperti dashboard aplikasi, portal berita, atau toko online), pengguna tentu ingin berpindah dari halaman Home, halaman Tentang Kami, hingga membuka halaman Detail Produk dengan URL spesifik (misal: /products/12). Jika kita menggunakan tag HTML biasa (<a href="...">), browser akan melakukan reload penuh yang lambat dan mereset seluruh state aplikasi. Di React, kita menggunakan konsep Single Page Application (SPA) dengan bantuan pustaka resmi React Router DOM v6. Kali ini admin akan membagikan panduan step-by-step setup routing, navigasi Link, dynamic URL params (useParams), hingga penanganan halaman 404 Not Found yang dijamin work 100%.

1. Mengapa Wajib Menggunakan React Router DOM?

React Router mengendalikan URL browser secara *client-side* tanpa perlu meminta file HTML baru ke server:

• Navigasi 0 Milidetik: Perpindahan antar halaman terasa instan seperti membuka aplikasi desktop/mobile.
• State Terjaga: State global (seperti user login atau keranjang belanja) tidak akan hilang saat pengguna berpindah menu.
• Dynamic Routing: Mendukung penangkapan parameter dinamis di URL seperti ID produk, slug artikel blog, atau username pengguna.

2. Langkah 1: Instalasi Paket React Router DOM

Buka terminal di folder projek Vite Anda, lalu pasang paket routing versi 6 terbaru:

npm install react-router-dom

3. Langkah 2: Membungkus Aplikasi di main.jsx

Buka file src/main.jsx dan bungkus komponen <App /> dengan <BrowserRouter>:

// File: src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

4. Langkah 3: Mendaftarkan Rute & Komponen Halaman di App.jsx

Buka file src/App.jsx dan buat rute navigasi lengkap beserta dynamic parameter:

// File: src/App.jsx
import { Routes, Route, Link, useParams } from 'react-router-dom';

// 1. Komponen Halaman Home
function HomePage() {
  return <h2 style={{ color: '#38bdf8' }}>🏠 Halaman Beranda Utama</h2>;
}

// 2. Komponen Halaman About
function AboutPage() {
  return <h2 style={{ color: '#34d399' }}>ℹ️ Tentang Aplikasi Ini</h2>;
}

// 3. Komponen Halaman Detail Produk (Dynamic Params)
function ProductDetailPage() {
  const { id } = useParams(); // Mengambil ID dari URL
  return (
    <div style={{ backgroundColor: '#1e293b', padding: '20px', borderRadius: '8px', border: '1px solid #334155' }}>
      <h3 style={{ color: '#f59e0b' }}>📦 Detail Produk</h3>
      <p>Anda sedang melihat spesifikasi produk dengan <b>ID: {id}</b></p>
    </div>
  );
}

// 4. Komponen 404 Not Found
function NotFoundPage() {
  return <h2 style={{ color: '#ef4444' }}>⚠️ 404 - Halaman Tidak Ditemukan!</h2>;
}

function App() {
  return (
    <div style={{ backgroundColor: '#0f172a', minHeight: '100vh', color: '#f8fafc', padding: '30px', fontFamily: 'Arial, sans-serif' }}>
      {/* Navbar Navigasi */}
      <nav style={{ display: 'flex', gap: '20px', borderBottom: '1px solid #334155', paddingBottom: '15px', marginBottom: '25px' }}>
        <Link to="/" style={{ color: '#38bdf8', textDecoration: 'none', fontWeight: 'bold' }}>Home</Link>
        <Link to="/about" style={{ color: '#38bdf8', textDecoration: 'none', fontWeight: 'bold' }}>About</Link>
        <Link to="/product/101" style={{ color: '#38bdf8', textDecoration: 'none', fontWeight: 'bold' }}>Produk #101</Link>
        <Link to="/product/205" style={{ color: '#38bdf8', textDecoration: 'none', fontWeight: 'bold' }}>Produk #205</Link>
      </nav>

      {/* Rute Konten */}
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/product/:id" element={<ProductDetailPage />} />
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </div>
  );
}

export default App;

Itulah panduan praktis menerapkan React Router DOM v6 untuk navigasi Single Page Application. Dengan menguasai Link, Routes, dan useParams, struktur aplikasi web React Anda kini sudah siap berkembang menjadi platform multi-halaman yang profesional.

Sekian tutorial Part 6 kali ini, silahkan share artikel ini jika Anda rasa bermanfaat untuk rekan-rekan yang sedang mendalami frontend development.

Semoga Bermanfaat ^_^

Terima Kasih.

Wassalamualaikum Wr. Wb.

Sumber gambar: Koleksi Pribadi / Analisis Routing React Router DOM