Developer Tools

Panduan Lengkap React Router 7 untuk Pemula: Instalasi, Routing, dan Navigasi

Toolhub19 September 2026

Panduan Lengkap React Router 7 untuk Pemula: Instalasi, Routing, dan Navigasi

Apa Itu React Router dan Mengapa Kamu Membutuhkannya?

React Router adalah library standar untuk menangani routing pada aplikasi React yang memungkinkan navigasi antar halaman tanpa reload browser. Dalam pengembangan aplikasi web modern, terutama yang berbasis Single Page Application (SPA), React Router menjadi komponen yang sangat penting untuk menciptakan pengalaman pengguna yang mulus dan responsif.

React Router 7 adalah versi terbaru dengan peningkatan performa yang signifikan, dukungan data loading bawaan, dan API yang lebih sederhana dibandingkan versi sebelumnya. Versi ini juga menawarkan integrasi yang lebih baik dengan React 18 dan fitur concurrent mode, sehingga pengembang dapat membangun aplikasi yang lebih cepat dan efisien.

Tanpa React Router, pengembang harus membangun sistem navigasi manual yang kompleks dan rawan error. Membuat sistem routing sendiri berarti harus menangani perubahan URL, riwayat browser, dan render komponen secara manual—sebuah tugas yang tidak hanya memakan waktu tetapi juga rentan terhadap bug.

React Router mendukung konsep Single Page Application (SPA) di mana konten berubah tanpa memuat ulang halaman dari server. Ini berarti pengguna dapat berpindah antar halaman dengan cepat, tanpa mengalami flicker atau delay yang biasanya terjadi pada website tradisional yang melakukan reload penuh setiap kali pengguna mengklik tautan.

Persiapan dan Instalasi React Router 7

Sebelum memulai instalasi React Router 7, pastikan Node.js dan npm atau yarn sudah terinstal di sistem. React Router 7 membutuhkan React versi 18 atau lebih baru sebagai dependensi, jadi pastikan proyek React kamu sudah menggunakan versi yang kompatibel.

Untuk menginstal React Router 7 pada proyek React yang sudah ada, jalankan perintah berikut di terminal:

npm install react-router-dom@7

Atau jika menggunakan yarn:

yarn add react-router-dom@7

Setelah instalasi selesai, library siap digunakan tanpa konfigurasi tambahan yang rumit. Kamu bisa langsung mengimpor komponen-komponen yang diperlukan dari react-router-dom dan mulai membangun sistem routing untuk aplikasi React kamu.

Bagi yang baru memulai proyek React, disarankan untuk membaca Panduan Lengkap React JS untuk Pemula terlebih dahulu untuk memahami dasar-dasar React sebelum menambahkan sistem routing.

Komponen Dasar React Router: BrowserRouter, Routes, dan Route

Tiga komponen inti React Router yang menjadi fondasi sistem routing adalah BrowserRouter, Routes, dan Route. Memahami ketiga komponen ini adalah langkah pertama yang penting sebelum beralih ke fitur yang lebih kompleks.

BrowserRouter adalah komponen pembungkus utama yang menyediakan konteks routing untuk seluruh aplikasi. Komponen ini harus ditempatkan di level tertinggi dalam hierarki komponen, biasanya membungkus seluruh aplikasi di file index.js atau App.js. BrowserRouter menggunakan HTML5 history API untuk menjaga sinkronisasi antara URL dan tampilan aplikasi.

Routes berfungsi sebagai container yang akan mencocokkan URL dengan Route yang sesuai. Ketika pengguna mengunjungi URL tertentu, Routes akan mencari Route yang cocok dan merender komponen yang ditentukan.

Route mendefinisikan pemetaan antara path URL dengan komponen React yang akan dirender. Setiap Route memiliki props path untuk menentukan URL dan element untuk menentukan komponen yang akan ditampilkan.

Berikut adalah contoh implementasi dasar:

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Perlu diingat bahwa urutan penulisan Route dalam Routes penting karena React Router akan mencocokkan dari atas ke bawah. Pastikan untuk menempatkan route yang lebih spesifik di atas route yang lebih umum.

Membuat Navigasi dengan Link dan NavLink

Setelah sistem routing dasar terpasang, langkah selanjutnya adalah membuat tautan navigasi antar halaman. React Router menyediakan dua komponen utama untuk keperluan ini: Link dan NavLink.

Komponen Link digunakan untuk membuat tautan navigasi yang tidak me-reload halaman, mirip dengan tag <a> namun dengan perilaku SPA. Ketika pengguna mengklik Link, React Router akan menangani navigasi secara internal tanpa memuat ulang halaman dari server.

Gunakan prop to pada Link untuk menentukan tujuan navigasi, bisa berupa string atau objek:

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

function Navigation() {
  return (
    <nav>
      <Link to="/">Beranda</Link>
      <Link to="/about">Tentang</Link>
      <Link to="/contact">Kontak</Link>
    </nav>
  );
}

NavLink adalah versi khusus dari Link yang secara otomatis menambahkan class active pada tautan yang sedang aktif. Ini sangat berguna untuk menu navigasi karena memudahkan styling pada halaman yang sedang aktif.

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

function Navigation() {
  return (
    <nav>
      <NavLink to="/" className={({ isActive }) => isActive ? 'active' : ''}>
        Beranda
      </NavLink>
      <NavLink to="/about" className={({ isActive }) => isActive ? 'active' : ''}>
        Tentang
      </NavLink>
    </nav>
  );
}

Routing Dinamis dengan useParams

Dalam pengembangan aplikasi nyata, seringkali kita membutuhkan rute yang dapat menerima parameter dinamis dari URL. Misalnya, halaman detail produk dengan URL seperti /products/123 atau profil pengguna dengan URL /users/john.

Route dinamis dibuat dengan menambahkan titik dua (:) diikuti nama parameter pada path. Contoh: /users/:id akan mencocokkan URL seperti /users/123 atau /users/john.

Hook useParams digunakan untuk mengakses nilai parameter dari URL di dalam komponen. Hook ini mengembalikan objek yang berisi semua parameter yang didefinisikan dalam path.

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

function UserProfile() {
  const { id } = useParams();
  
  return (
    <div>
      <h1>Profil Pengguna: {id}</h1>
      {/* Logika untuk mengambil data pengguna berdasarkan id */}
    </div>
  );
}

// Route: <Route path="/users/:id" element={<UserProfile />} />

React Router 7 mendukung multiple parameter dalam satu path, misalnya /category/:catId/product/:prodId. Ini memungkinkan pembuatan struktur URL yang lebih kompleks dan hierarkis.

Parameter dinamis sangat berguna untuk halaman detail produk, profil pengguna, atau halaman konten individual lainnya. Dengan routing dinamis, kamu tidak perlu membuat Route terpisah untuk setiap item—cukup satu Route dengan parameter yang akan menangani semua item.

Navigasi Programatis dengan useNavigate

Tidak semua navigasi terjadi melalui klik tautan. Seringkali, kita perlu melakukan navigasi secara terprogram setelah aksi tertentu seperti submit form, login berhasil, atau klik tombol. Untuk keperluan ini, React Router menyediakan hook useNavigate.

Hook useNavigate mengembalikan fungsi yang dapat dipanggil untuk berpindah halaman secara terprogram. Fungsi navigate dapat menerima path string atau angka untuk navigasi maju/mundur dalam history.

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

function LoginForm() {
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();
    // Logika login
    const success = await loginUser();
    
    if (success) {
      navigate('/dashboard'); // Navigasi ke dashboard setelah login
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="submit">Login</button>
    </form>
  );
}

Gunakan opsi replace: true pada navigate untuk mengganti entri history saat ini tanpa menambah entri baru. Ini berguna untuk situasi di mana kamu tidak ingin pengguna dapat kembali ke halaman sebelumnya menggunakan tombol back browser.

navigate('/dashboard', { replace: true });

Navigasi programatis juga mendukung navigasi maju dan mundur menggunakan angka:

navigate(-1); // Kembali ke halaman sebelumnya
navigate(1);  // Maju ke halaman berikutnya

Nested Routes dan Layout Bersama

Dalam aplikasi yang kompleks, seringkali kita memiliki struktur halaman yang berbagi layout yang sama. Misalnya, dashboard dengan sidebar navigasi yang tetap muncul di beberapa halaman. Nested routes memungkinkan pembuatan layout bersama yang tetap konsisten di beberapa halaman.

Outlet adalah komponen khusus yang berfungsi sebagai tempat render konten anak dalam nested route. Route induk mendefinisikan layout bersama, sementara Route anak mendefinisikan konten spesifik per halaman.

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

function DashboardLayout() {
  return (
    <div className="dashboard">
      <aside>
        <nav>
          <Link to="/dashboard">Overview</Link>
          <Link to="/dashboard/settings">Settings</Link>
          <Link to="/dashboard/profile">Profile</Link>
        </nav>
      </aside>
      <main>
        <Outlet /> {/* Konten anak akan dirender di sini */}
      </main>
    </div>
  );
}

// Konfigurasi Route
<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardOverview />} />
  <Route path="settings" element={<Settings />} />
  <Route path="profile" element={<Profile />} />
</Route>

Nested routes sangat berguna untuk dashboard, halaman profil, atau aplikasi dengan sidebar navigasi. Dengan pendekatan ini, layout bersama hanya perlu didefinisikan sekali dan akan otomatis diterapkan ke semua halaman anak.

Apa fungsi komponen Outlet dalam nested routes? Outlet adalah komponen yang berfungsi sebagai tempat render konten anak dalam nested route. Route induk mendefinisikan layout bersama, dan Outlet akan menampilkan konten dari Route anak yang sesuai dengan URL saat ini.

Proteksi Rute (Protected Routes) untuk Halaman Khusus

Tidak semua halaman dalam aplikasi boleh diakses oleh semua pengguna. Halaman seperti dashboard admin, pengaturan akun, atau data pribadi memerlukan autentikasi sebelum dapat diakses. Protected route adalah pola untuk membatasi akses ke halaman tertentu hanya untuk pengguna yang sudah login.

Implementasi dilakukan dengan membuat komponen pembungkus yang memeriksa status autentikasi sebelum menampilkan konten. Jika pengguna belum login, arahkan secara otomatis ke halaman login menggunakan useNavigate atau komponen Navigate.

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

function ProtectedRoute({ children }) {
  const isAuthenticated = checkAuth(); // Fungsi untuk memeriksa status login

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

// Penggunaan dalam Route
<Route path="/dashboard" element={
  <ProtectedRoute>
    <DashboardLayout />
  </ProtectedRoute>
}>
  <Route index element={<DashboardOverview />} />
  <Route path="settings" element={<Settings />} />
</Route>

React Router 7 mendukung penggunaan komponen Navigate untuk redirect bersyarat langsung di dalam Route. Ini memberikan fleksibilitas dalam mengatur alur navigasi berdasarkan kondisi tertentu.

Protected route juga dapat diimplementasikan dengan logika yang lebih kompleks, seperti pemeriksaan peran pengguna (role-based access control) atau masa berlaku sesi.

Kesimpulan dan Langkah Selanjutnya

React Router 7 menyediakan solusi routing yang lengkap dan mudah digunakan untuk aplikasi React modern. Dari komponen dasar seperti BrowserRouter, Routes, dan Route, hingga fitur lanjutan seperti routing dinamis, nested routes, dan proteksi rute, semua dapat diimplementasikan dengan API yang intuitif dan terdokumentasi dengan baik.

Kuasai komponen dasar (BrowserRouter, Routes, Route) sebelum beralih ke fitur yang lebih kompleks. Pemahaman yang kuat tentang fondasi akan memudahkan kamu dalam mengadopsi fitur-fitur lanjutan.

Praktikkan pembuatan aplikasi sederhana dengan beberapa halaman untuk memperkuat pemahaman. Mulailah dengan aplikasi yang memiliki halaman beranda, tentang, dan kontak, lalu kembangkan dengan menambahkan routing dinamis dan nested routes.

Pelajari fitur lanjutan seperti data loading, error boundaries, dan lazy loading untuk aplikasi skala besar. Dokumentasi resmi React Router di reactrouter.com adalah sumber utama dan paling otoritatif untuk mempelajari seluruh fitur secara mendalam.

Untuk pengembangan lebih lanjut, pelajari juga Memahami Konsep Single Page Application (SPA) di React dan Tips Optimalisasi Performa Aplikasi React untuk membangun aplikasi yang lebih cepat dan efisien.

FAQ:

Apa perbedaan React Router versi 7 dengan versi sebelumnya?
React Router 7 menghadirkan peningkatan performa yang signifikan, API yang lebih sederhana, dukungan data loading bawaan, serta integrasi yang lebih baik dengan React 18 dan fitur concurrent mode.

Apakah React Router 7 kompatibel dengan React versi lama?
React Router 7 membutuhkan React versi 18 atau lebih baru. Jika masih menggunakan React versi 17 atau lebih lama, disarankan menggunakan React Router versi 6 yang masih mendukung versi tersebut.

Bagaimana cara menangani halaman 404 (not found) di React Router 7?
Anda dapat membuat Route khusus di akhir daftar Routes dengan path '*' yang akan menangani semua URL yang tidak cocok dengan Route lain, lalu arahkan ke komponen halaman 404.

Bagaimana cara mengirim data antar halaman menggunakan React Router?
Anda dapat mengirim data melalui URL parameter menggunakan useParams, melalui state pada objek navigasi useNavigate, atau melalui query string menggunakan useSearchParams.

Sudah siap mempraktikkan React Router 7? Mulailah dengan membuat proyek React baru dan instal react-router-dom. Bagikan pengalaman atau pertanyaanmu di kolom komentar agar kita bisa belajar bersama! Jangan lupa subscribe newsletter untuk mendapatkan tutorial React terbaru setiap minggu.