Navigasi Mulus: Membuat Halaman Single Page Application (SPA) dengan React Router (Part 12)

Pernah ngalamin jengkelnya nungguin halaman reload cuma buat pindah dari Home ke About? Udah kayak nungguin pacar dandan, lama banget! Nah, di dunia web modern, hal-hal kayak gitu udah ketinggalan zaman. Kita mau yang smooth, instan, kayak geser TikTok, kan? Pas banget! Di Part 12 seri Belajar React kita kali ini, kita bakal bongkar rahasia di balik aplikasi web super cepat dan responsif: Single Page Application (SPA) dengan bantuan sang penyelamat, React Router!

Daftar Isi

Kenapa Perlu React Router? Bye-bye Full Reload!
Setup Awal: Instalasi React Router
Bongkar Komponen Utama React Router
Praktik Ngoding: Bikin Aplikasi Router Sederhana
Mengatasi Error 404: Halaman Nggak Ketemu!
Parameter URL: Ngirim Data Antar Halaman
Latihan Ngoding Ngakak!

Kenapa Perlu React Router? Bye-bye Full Reload!

Bayangin gini: setiap kali user ngeklik tombol "About Us", browser harus ngeload ulang semua CSS, JavaScript, gambar, dan data dari awal lagi. Boros kuota, boros waktu, dan bikin user gondok. Nah, di SPA, sekali ngeload, ya udah! Navigasi selanjutnya tinggal ganti konten yang perlu aja, tanpa nge-refresh seluruh halaman. Ini dia yang bikin aplikasi React kita kerasa seamless. Dan siapa jagoannya? Tentu saja React Router!

React Router ini semacam 'manajer lalu lintas' buat aplikasi React kita. Dia yang ngatur, "Oke, kalau URL-nya `/about`, gue tampilkan komponen About. Kalau URL-nya `/contact`, gue tampilkan komponen Contact." Simpel tapi powerful!

Setup Awal: Instalasi React Router

Seperti biasa, sebelum ngoding, kita perlu instal dulu si package sakti ini. Buka terminal kalian di folder proyek React, lalu ketikkan:

npm install react-router-dom

Tungguin sebentar sampai prosesnya selesai. Kalau udah, selamat! React Router siap tempur di proyek kalian.

Bongkar Komponen Utama React Router

Ada beberapa komponen inti yang wajib kalian tahu di React Router. Ibaratnya, ini adalah alat-alat perang utama kita:

<BrowserRouter>: Ini adalah induk dari semua router kita. Dia yang ngasih 'lingkungan' buat routing di aplikasi. Biasanya ditaruh di level paling atas (App.js atau index.js).
<Routes>: Nah, ini semacam kontainer buat semua definisi <Route> kita. Dia bakal nge-render <Route> pertama yang cocok dengan URL saat ini.
<Route>: Di sinilah kita mendefinisikan URL mana yang bakal nampilin komponen apa. Punya atribut path (untuk URL) dan element (untuk komponen).
<Link>: Ini pengganti tag <a> biasa kita. Bedanya, <Link> nggak bikin halaman reload penuh saat diklik, jadi navigasinya tetap smooth.

Praktik Ngoding: Bikin Aplikasi Router Sederhana

Yuk, langsung aja kita praktik bikin aplikasi SPA sederhana dengan beberapa halaman. Kita bakal punya halaman Home, About, dan Contact.

1. Bikin Komponen Halaman Dulu

Buat file baru di folder src/components (kalau belum ada, bikin aja) atau langsung di src:

src/components/Home.js:


import React from 'react';

function Home() {
  return (
    <div>
      <h2>Selamat Datang di Halaman Utama!</h2>
      <p>Ini adalah beranda dari aplikasi keren kita. Jangan lupa ngopi ya!</p>
    </div>
  );
}

export default Home;

src/components/About.js:


import React from 'react';

function About() {
  return (
    <div>
      <h2>Tentang Kami</h2>
      <p>Kami adalah tim developer yang suka ngoding sampai lupa waktu dan sering kena bug.</p>
      <p><em>Mission: Mengurangi error di dunia.</em></p>
    </div>
  );
}

export default About;

src/components/Contact.js:


import React from 'react';

function Contact() {
  return (
    <div>
      <h2>Hubungi Kami</h2>
      <p>Ada pertanyaan atau nemu bug? Jangan sungkan email ke <strong>admin@ngoding.com</strong>!</p>
      <p>Atau telepon ke: <em>0800-NGODING-LAGI</em>.</p>
    </div>
  );
}

export default Contact;

2. Konfigurasi Router di App.js

Sekarang, kita gabungkan semua komponen ini di App.js dan pasang routernya:

src/App.js:


import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <BrowserRouter>
      <div style={{ padding: '20px' }}>
        <h1>Aplikasi Ngoding Bareng React Router</h1>
        <nav>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            <li style={{ display: 'inline-block', marginRight: '15px' }}>
              <Link to="/">Home</Link>
            </li>
            <li style={{ display: 'inline-block', marginRight: '15px' }}>
              <Link to="/about">About</Link>
            </li>
            <li style={{ display: 'inline-block' }}>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <!-- Area tempat komponen di-render sesuai URL -->
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Coba jalankan aplikasi kalian dengan npm start. Klik-klik link di navigasi. Rasakan sensasi pindah halaman tanpa full reload! Mantap, kan?

Mengatasi Error 404: Halaman Nggak Ketemu!

Kadang, user iseng ngetik URL yang nggak ada, misalnya `/halaman-nggak-jelas`. Kalau gini, React Router bakal bingung mau nampilin apa. Hasilnya? Layar kosong atau error. Kita bisa tambahin catch-all route untuk handle kasus 404 ini.

Cukup tambahkan satu lagi <Route> di dalam <Routes> kita, dengan path="*":

src/components/NotFound.js (komponen baru):


import React from 'react';

function NotFound() {
  return (
    <div>
      <h2>404 - Halaman Nggak Ketemu, Bos!</h2>
      <p>Duh, kayaknya kamu nyasar nih. URL yang kamu tuju nggak ada di peta aplikasi kita.</p>
      <p><em>Mungkin lagi di dunia lain?</em></p>
    </div>
  );
}

export default NotFound;

src/App.js (update):


import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import NotFound from './components/NotFound'; // Jangan lupa import!

function App() {
  return (
    <BrowserRouter>
      <div style={{ padding: '20px' }}>
        <h1>Aplikasi Ngoding Bareng React Router</h1>
        <nav>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            <li style={{ display: 'inline-block', marginRight: '15px' }}>
              <Link to="/">Home</Link>
            </li>
            <li style={{ display: 'inline-block', marginRight: '15px' }}>
              <Link to="/about">About</Link>
            </li>
            <li style={{ display: 'inline-block' }}>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="*" element={<NotFound />} /> <!-- Ini dia catch-all route-nya -->
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Sekarang coba akses URL ngawur, misalnya http://localhost:3000/aduh-nggak-ada. Voila! Kalian akan disambut halaman 404 yang sudah kita bikin.

Parameter URL: Ngirim Data Antar Halaman

Seringkali kita butuh ngirim data lewat URL, misalnya ID produk: /products/123. React Router bisa banget ngatasin ini pakai URL Parameters dan hook useParams. Yuk, kita bikin contoh halaman detail produk.

src/components/ProductDetail.js (komponen baru):


import React from 'react';
import { useParams } from 'react-router-dom';

function ProductDetail() {
  const { productId } = useParams(); // Ambil parameter dari URL

  // Anggap aja ini data produk dari API atau database
  const products = {
    '1': { name: 'Kopi Bubuk Asli', price: 'Rp 35.000', description: 'Kopi pilihan para ngodingers sejati.' },
    '2': { name: 'Keyboard Mekanik RGB', price: 'Rp 750.000', description: 'Biar ngoding makin semangat dengan lampu warna-warni.' },
    '3': { name: 'Monitor Ultrawide', price: 'Rp 3.500.000', description: 'Untuk multitasking 100 tab browser sekaligus.' },
  };

  const product = products[productId];

  if (!product) {
    return (
      <div>
        <h2>Produk Tidak Ditemukan!</h2>
        <p>Kayaknya produk dengan ID <strong>{productId}</strong> ini udah di-delete sama admin, atau emang nggak pernah ada?</p>
      </div>
    );
  }

  return (
    <div>
      <h2>Detail Produk: {product.name}</h2>
      <p><strong>Harga:</strong> {product.price}</p>
      <p><strong>Deskripsi:</strong> {product.description}</p>
      <p><em>ID Produk ini adalah: {productId}</em></p>
    </div>
  );
}

export default ProductDetail;

src/App.js (update, tambahkan route untuk ProductDetail):


import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import NotFound from './components/NotFound';
import ProductDetail from './components/ProductDetail'; // Import ProductDetail

function App() {
  return (
    <BrowserRouter>
      <div style={{ padding: '20px' }}>
        <h1>Aplikasi Ngoding Bareng React Router</h1>
        <nav>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            <li style={{ display: 'inline-block', marginRight: '15px' }}>
              <Link to="/">Home</Link>
            </li>
            <li style={{ display: 'inline-block', marginRight: '15px' }}>
              <Link to="/about">About</Link>
            </li>
            <li style={{ display: 'inline-block', marginRight: '15px' }}>
              <Link to="/contact">Contact</Link>
            </li>
            <li style={{ display: 'inline-block', marginRight: '15px' }}>
              <Link to="/products/1">Produk 1</Link>
            </li>
            <li style={{ display: 'inline-block', marginRight: '15px' }}>
              <Link to="/products/2">Produk 2</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/products/:productId" element={<ProductDetail />} /> <!-- Rute dengan parameter -->
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Perhatikan di <Route path="/products/:productId" ... />, bagian :productId ini adalah parameter dinamis yang bisa kita ambil nilainya nanti pakai useParams() di komponen ProductDetail. Coba klik link produk yang baru, atau ketik manual di browser: http://localhost:3000/products/1 atau http://localhost:3000/products/10 (ini bakal bilang nggak ketemu!). Keren, kan?

Selamat! Kalian sudah berhasil bikin aplikasi React yang navigasinya super mulus dengan React Router. Ini baru permulaan, tapi pondasinya udah kuat. Di bagian selanjutnya, mungkin kita bisa bahas navigasi programatik atau nested routes yang lebih canggih lagi. Siapin ngopi dan gorengan buat lembur nanti!

Latihan Ngoding Ngakak!

Oke, biar makin jago dan biar nggak cuma copas kode doang, yuk kita bikin latihan kecil-kecilan. Skenarionya gini:

Kamu adalah seorang junior developer di startup "Nasi Padang Digital". Bosmu yang super kocak minta kamu bikin fitur navigasi untuk menu Nasi Padang. Ada 3 jenis menu utama:

Paket Hemat Programmer (/menu/hemat) - Tampilkan list menu hemat ala anak kos.

Paket Sultan Developer (/menu/sultan) - Tampilkan menu premium buat yang abis gajian.

Paket Tengah Bulan Merana (/menu/merana) - Tampilkan menu yang cuma ada nasi sama kuah, plus curhatan kenapa bisa boros.

Nah, bosmu pengen URL-nya nanti bisa fleksibel. Jadi, kalau user akses /menu/hemat, muncul menu hemat. Kalau user akses /menu/sultan, muncul menu sultan. Gunakan URL Parameter kayak yang udah kita pelajari tadi, dan pastikan ada komponen <NotFound> kalau user ngakses /menu/vegetarian (kan Nasi Padang nggak ada vegetarian!)

Selamat mencoba! Kalau ada bug, jangan panik. Itu cuma sapaan dari masa depan yang bilang kalian bakal jadi developer handal. Ngopi dulu aja!

Navigasi Mulus: Membuat Halaman Single Page Application (SPA) dengan React Router (Part 12)