Navigasi Halaman (Routing)

Single Page Application (SPA)

Aplikasi React biasanya berupa satu halaman HTML yang kontennya berganti tanpa memuat ulang browser. Tetapi pengguna tetap mengharapkan URL berbeda untuk halaman berbeda (/produk, /kontak), tombol back berfungsi, dan tautan bisa dibagikan. Itulah tugas router.

React Router

Library routing paling populer:

npm install react-router-dom

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Beranda</Link>
        <Link to="/tentang">Tentang</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Beranda />} />
        <Route path="/tentang" element={<Tentang />} />
        <Route path="/produk/:id" element={<DetailProduk />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

• <Link to> — pengganti <a href> yang tidak memuat ulang halaman.
• <Route path element> — memetakan URL ke komponen.
• Parameter dinamis :id dibaca dengan hook useParams().
• useNavigate() — berpindah halaman lewat kode.
• path="*" — halaman 404.

Konsep di baliknya

Router pada dasarnya melakukan hal sederhana: menyimpan "halaman saat ini" sebagai state (disinkronkan dengan URL), lalu menampilkan komponen yang sesuai dengan conditional rendering. Kita bisa menirunya dengan useState:

function App() {
  const [halaman, setHalaman] = useState("beranda");

  const konten = {
    beranda: <p>Halaman Beranda</p>,
    tentang: <p>Halaman Tentang</p>,
  };

  return (
    <div>
      <button onClick={() => setHalaman("beranda")}>Beranda</button>
      <button onClick={() => setHalaman("tentang")}>Tentang</button>
      <div className="konten">{konten[halaman]}</div>
    </div>
  );
}

Cukup untuk demo, tetapi tidak mengubah URL, tidak mendukung tombol back, dan tidak bisa dibagikan — makanya produksi memakai React Router.

Fitur router yang berguna

Framework berbasis React

Next.js dan Remix menyertakan routing berbasis folder, rendering di server (SSR), dan optimasi lain — pilihan umum untuk aplikasi produksi.