Bab 7: React Router

Membangun Single Page Application (SPA) dengan navigasi sisi klien.

Apa itu Client-Side Routing?

Secara tradisional, saat Anda mengklik sebuah link, browser akan membuat permintaan baru ke server dan memuat ulang seluruh halaman. Pada Single Page Application (SPA), navigasi ditangani di sisi klien (browser) oleh JavaScript. URL di address bar berubah dan konten halaman diperbarui tanpa perlu me-refresh halaman. Ini memberikan pengalaman pengguna yang lebih cepat dan mulus, seperti menggunakan aplikasi desktop.

React Router adalah library standar untuk mengimplementasikan fungsionalitas ini di React.

Komponen Inti React Router

Ada beberapa komponen utama yang perlu Anda ketahui:

1. `BrowserRouter`, `Routes`, dan `Route`

Ini adalah tiga serangkai yang mengatur sistem routing Anda.

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/profile" element={<ProfilePage />} />
      </Routes>
    </BrowserRouter>
  );
}
  • BrowserRouter: Membungkus seluruh aplikasi Anda untuk mengaktifkan routing.
  • Routes: Membungkus semua kemungkinan rute.
  • Route: Mendefinisikan satu rute, menghubungkan sebuah `path` (URL) dengan `element` (komponen) yang akan ditampilkan.

2. Komponen `Link`

Untuk membuat tautan navigasi, jangan gunakan tag biasa karena akan menyebabkan refresh halaman. Gunakan komponen Link dari React Router.

Contoh Kode:

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/profile">Profile</Link>
    </nav>
  );
}

Simulasi Interaktif:

Klik tombol di bawah ini untuk melihat bagaimana konten berubah tanpa refresh halaman.

Halaman Utama

Ini adalah konten untuk halaman utama.