Belajar React Router

Pendahuluan

React Router adalah library yang digunakan untuk mengelola navigasi dalam aplikasi React. Dengan React Router, kita bisa membuat SPA (Single Page Application) yang memiliki banyak halaman tanpa perlu reload penuh.

Dalam artikel ini, kita akan membahas cara menggunakan React Router dengan contoh kode yang bisa langsung diterapkan.

1. Apa Itu React Router?

React Router adalah library berbasis JavaScript yang memungkinkan navigasi antar halaman dalam aplikasi React tanpa reload.

Keuntungan Menggunakan React Router

  • SPA (Single Page Application) → Halaman berubah tanpa reload.
  • Dynamic Routing → Bisa menampilkan konten berdasarkan parameter.
  • Navigation Control → Bisa berpindah halaman dengan kode, bukan hanya dengan <a> biasa.

2. Instalasi React Router

Sebelum bisa menggunakannya, pastikan kamu sudah menginstal React Router dengan perintah:

JavaScript
copy.png
copy
npm install react-router-dom

Jika menggunakan Yarn:

JavaScript
copy.png
copy
yarn add react-router-dom

3. Membuat Router Dasar di React

Untuk mulai menggunakan React Router, kita perlu mengonfigurasi routing di aplikasi kita. Berikut contoh dasar implementasinya:

JavaScript
copy.png
copy

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

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

export default App;

Penjelasan:

  • <BrowserRouter> → Komponen utama untuk mengaktifkan routing.
  • <Routes> → Membungkus semua <Route>.
  • <Route> → Mendefinisikan path dan komponen yang akan ditampilkan.

Daripada menggunakan <a>, lebih baik pakai <Link> dari React Router agar tidak menyebabkan reload penuh.

JavaScript
copy.png
copy

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

function Navbar() {
return (
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
  </nav>
);
}

export default Navbar;
  • Tidak menyebabkan reload.
  • Performa lebih baik karena hanya mengganti bagian yang perlu diubah.

5. Navigasi dengan useNavigate

Selain <Link>, kita juga bisa menggunakan useNavigate() untuk berpindah halaman dengan kode.

JavaScript
copy.png
copy

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

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

const goToAbout = () => {
  navigate("/about");
};

return (
  <div>
    <h1>Home Page</h1>
    <button onClick={goToAbout}>Go to About</button>
  </div>
);
}

export default Home;

useNavigate() bisa berguna kalau kita mau navigasi berdasarkan event atau kondisi tertentu.

6. Dynamic Routing dengan useParams

Kalau kita mau menangani URL yang dinamis (misalnya /user/:id), kita bisa pakai useParams().

JavaScript
copy.png
copy

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

function UserProfile() {
const { id } = useParams();

return <h1>Profil User dengan ID: {id}</h1>;
}

export default UserProfile;

Lalu tambahkan route-nya:

JavaScript
copy.png
copy
<Route path="/user/:id" element={<UserProfile />} />

Dengan ini, jika kita membuka /user/123, maka yang tampil adalah "Profil User dengan ID: 123".

7. Protected Route (Autentikasi)

Kalau mau membatasi akses ke halaman tertentu, bisa pakai Protected Route.

JavaScript
copy.png
copy

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

function ProtectedRoute({ children }) {
const isAuthenticated = false; // Ganti dengan logic autentikasi

return isAuthenticated ? children : <Navigate to="/login" />;
}

export default ProtectedRoute;

Penggunaannya di app.jsx :

JavaScript
copy.png
copy
<Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />

Jika user belum login, dia akan dialihkan ke /login.

8. Kesimpulan

React Router sangat powerful untuk navigasi dalam aplikasi React. Dengan fitur seperti <Link>, useNavigate(), useParams(), dan Protected Route, kita bisa membuat aplikasi yang lebih interaktif dan dinamis.

Jika ingin mendalami lebih lanjut, kamu bisa cek dokumentasi resminya di React Router Documentation. [iklan]

Semoga bermanfaat!