React Router Dasar — React

Pas pertama kamu klik link di Tokopedia — perhatiin: URL berubah, konten berubah, tapi PAGE GAK RELOAD. Tab browser gak flicker, gak ada white screen…

Routing adalah memilih halaman mana yang tampil berdasarkan URL. Di app React, routing terjadi di browser (client-side routing): URL berubah dan isi halaman berganti, tanpa meminta HTML baru ke server dan tanpa reload. React Router adalah library paling populer untuk itu. Mirip pindah ruangan di dalam satu rumah: kamu cukup jalan ke ruangan lain dan papan nama di pintunya (URL) ikut berganti, gak perlu keluar lewat pagar lalu masuk lagi (reload).

🧪 Tebakan cepat: di app yang memakai React Router, kamu menekan tombol Like sampai angkanya 3, lalu mengklik <a href="/about"> biasa, bukan <Link>. Berapa angka Like-nya sesudah itu? Tebak dulu, jawabannya ada di bagian "Pindah halaman dengan Link".

URL menentukan komponen

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="users/:id" element={<UserDetail />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}
URL di address bar Route yang cocok Yang tampil di dalam Layout
/ index Home
/about about About
/users/2 users/:id, dengan id = "2" UserDetail
/kontak * NotFound

Pindah halaman dengan Link

import { Link } from "react-router"

function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/users/2">User 2</Link>
    </nav>
  )
}

<Link to="/about"> dirender jadi <a href="/about"> juga, tapi kliknya dicegat JavaScript: URL diganti, <Routes> memilih komponen baru, dan selesai. Gak ada request HTML ke server, jadi state yang ada tetap hidup.

<a href="/about"> biasa lain cerita. Browser meminta halaman baru ke server, seluruh app dimuat dari nol, dan semua state di memori hilang. Like yang tadinya 3 jadi 0 lagi. Itu jawaban tebakannya. Pakai <a href> cuma untuk link ke situs lain.

Untuk pindah halaman dari kode, misalnya sesudah tombol diklik, pakai useNavigate:

import { useNavigate } from "react-router"

function NextButton() {
  const navigate = useNavigate()
  return <button onClick={() => navigate("/about")}>Ke About</button>
}

Parameter di URL: useParams

import { useNavigate, useParams } from "react-router"

const USERS = { 1: "Budi", 2: "Ani" }

function UserDetail() {
  const { id } = useParams() // di /users/2, id = "2"
  const navigate = useNavigate()

  return (
    <div>
      <h1>User #{id}</h1>
      <p>{USERS[id] ?? "User ini gak ada"}</p>
      <button onClick={() => navigate(`/users/${Number(id) + 1}`)}>User berikutnya</button>
    </div>
  )
}

Layout bersama: nested route dan Outlet

Route about dan users/:id ditulis di dalam <Route path="/" element={<Layout />}>. Artinya Layout selalu tampil, dan halaman anaknya muncul di tempat <Outlet />:

import { Outlet } from "react-router"

function Layout() {
  const [likes, setLikes] = useState(0)

  return (
    <div>
      <Nav />
      <button onClick={() => setLikes(likes + 1)}>Like {likes}</button>
      <main>
        <Outlet />
      </main>
    </div>
  )
}

Pindah dari / ke /about lewat <Link> cuma mengganti isi <Outlet />. Layout gak dibuang, jadi likes tetap. Lupa menulis <Outlet />? Halaman anaknya gak punya tempat, dan yang tampil cuma Layout.

Di latihan: React Router sungguhan

Editor latihan memuat React Router asli (versi 6.30.1) begitu kodemu meng-import "react-router-dom" atau "react-router". Isi yang dipakai di sini sama di v6 dan v7. Satu bedanya: pratinjau gak punya address bar, jadi BrowserRouter di sana menyimpan riwayat alamatnya di memori dan selalu mulai dari /.

⚠️ Jebakan yang sering ketemu

TL;DR: React Router melakukan client-side routing: URL berubah dan komponen berganti tanpa reload. <BrowserRouter> membungkus app, <Routes> memilih <Route path="..." element={...}> yang cocok, index untuk alamat induk persis, * untuk sisanya. Pindah halaman dengan <Link to="/about">, bukan <a href>, atau dari kode dengan useNavigate(). :id di path dibaca dengan const { id } = useParams(), dan nilainya selalu string. Route di dalam route berbagi layout, dan anaknya tampil di <Outlet />. Di v7 semuanya di-import dari "react-router".

Yang akan kamu pelajari