Tutorial React: Membuat Navigasi dengan react router

Kalau kita perhatikan aplikasi seperti Facebook atau Twitter, simponi bisa berpindah halaman tanpa harus refresh atau memuat ulang browser? Jawabannya adalah Client-Side Routing.

Dalam tutorial ini, kita akan belajar cara berpindah halaman dengan menggunakan React Router (Data Mode)

Apa yang akan kita buat? Kita akan membangun aplikasi sederhana yang memiliki dua halaman:

1. Movie Page: Halaman utama.
2. Add Movie Page: Halaman menambah movie.

Kita akan bisa berpindah antar halaman

Langkah 1: Membuat Project React dengan TypeScript

Silahkan ikuti tutorial dihalam ini Tutorial membuat project react, kalau sudah punya bisa lewati tahap ini

Langkah 2: Menginstall React Router

Sekarang masuk ke bagian utama. Kita akan menginstal library routing. Di react, package yang umum digunakan adalah React Router.

Jalankan perintah ini:

npm i react-router

Langkah 3: Membuat Halaman (Components)

Sebelum kita mengatur rute, kita butuh halaman untuk ditampilkan. Mari kita buat dua komponen sederhana di dalam folder src.

Buat file baru: src/pages/movies/Movies.tsx

export default function Movies() {
  return (
    <div className="flex flex-col items-center justify-center h-screen bg-blue-50">
      <h1 className="text-4xl font-bold text-blue-600 mb-4">Halaman Movie</h1>
      <p className="text-gray-600 text-lg">Selamat datang di aplikasi React Router!</p>
    </div>
  );
}

Buat file baru: src/pages/movies/AddMovie.tsx

export default function AddMovie() {
  return (
    <div className="flex flex-col items-center justify-center h-screen bg-green-50">
      <h1 className="text-4xl font-bold text-green-600 mb-4">Halaman Tambah Movie</h1>
      <p className="text-gray-600 text-lg">Ini adalah halaman kedua untuk demonstrasi navigasi.</p>
    </div>
  );
}

Penjelasan: Kita menggunakan class Tailwind seperti flex, h-screen (tinggi layar penuh), dan text-4xl agar tampilan langsung rapi tanpa menulis file CSS terpisah.

Langkah 4: Setup Router dengan Data Mode dan Lazy Loading

Sekarang, mari kita buat "peta" untuk aplikasi kita. Di langkah ini, kita akan mendefinisikan rute (URL) apa saja yang tersedia dan halaman mana yang harus ditampilkan saat pengguna mengunjungi URL tersebut.

Kita akan menggunakan Lazy Loading.

1. Mengapa Lazy Loading? Bayangkan Anda masuk ke restoran. Apakah pelayan langsung membawakan semua menu yang ada di dapur ke meja Anda sekaligus? Tidak, kan? Itu akan membuat meja penuh dan pelayan keberatan.

2. Begitu juga dengan aplikasi. Tanpa Lazy Loading, browser akan mengunduh seluruh halaman aplikasi di awal, membuat loading awal terasa lambat. Dengan Lazy Loading, kita hanya memuat halaman yang sedang dibuka pengguna

Silakan buat file baru di src/routes/router.ts dan masukkan kode berikut:

import {createBrowserRouter} from "react-router";

const router = createBrowserRouter([
    {
        path: "/",
        children: [
            {
                index: true,
                lazy: {
                    Component: async () => {
                        const component = await import("../pages/movies/Movies.tsx")

                        return component.default
                    }
                }
            },
            {
                path: "/add-movie",
                lazy: {
                    Component: async () => {
                        const component = await import("../pages/movies/AddMovie.tsx")

                        return component.default
                    }
                }
            }
        ]
    },
])

export default router

Langkah 5: Menambahkan Navigasi Antar Halaman

Setelah selesai mendefinisikan path, sekarang kita butuh cara untuk berpindah halaman. Saat ini, kita masih harus mengetik URL secara manual di browser untuk pindah halaman. Tentu saja user tidak akan melakukan itu

Kita perlu menambahkan tombol navigasi.

Konsep Penting: <Link> vs <a>

Di HTML biasa, kita menggunakan tag <a> untuk link. Namun di React (SPA), hindari menggunakan tag <a> untuk navigasi internal.

• Tag <a>: Memaksa browser me-refresh seluruh halaman. Ini membuat aplikasi terasa lambat dan "berkedip".
• Komponen <Link>: Mengubah URL dan tampilan secara instan tanpa me-refresh halaman. Ini membuat aplikasi terasa sangat cepat seperti tidak ada delay.

Mari kita update kedua halaman kita.

Update src/pages/movies/Movies.tsx:

import { Link } from "react-router";

export default function Home() {
  return (
    <div className="flex flex-col items-center justify-center h-screen bg-blue-50">
      <h1 className="text-4xl font-bold text-blue-600 mb-4">Halaman Movie</h1>
      <p className="text-gray-600 text-lg">Selamat datang di aplikasi React Router!</p>

      <Link
        to="/add-movie"
        className="px-6 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
      >
        Tambah Movie
      </Link>
    </div>
  );
}

Update src/pages/movies/AddMovie.tsx:

import { Link } from "react-router";

export default function About() {
  return (
    <div className="flex flex-col items-center justify-center h-screen bg-green-50">
      <h1 className="text-4xl font-bold text-green-600 mb-4">Halaman Tambah Movie</h1>
      <p className="text-gray-600 text-lg">Ini adalah halaman kedua untuk demonstrasi navigasi.</p>

      <Link
        to="/"
        className="px-6 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition"
      >
        List Movie
      </Link>
    </div>
  );
}

Sekarang coba jalankan aplikasi kamu. Klik tombol "Tambah Movie", dan perhatikan: Halaman berubah seketika tanpa icon loading berputar di tab browser