Cara Membuat Routing Halaman
di React JS
1. Latar Belakang
Pada pengembangan web tradisional, setiap kali pengguna berpindah ke halaman lain, peramban (browser) harus memuat ulang seluruh halaman dari server. Pendekatan ini seringkali memakan waktu dan mengganggu pengalaman pengguna, terutama pada koneksi internet yang lambat. Seiring berkembangnya teknologi, muncul konsep Single Page Application (SPA), di mana aplikasi web hanya memuat satu halaman HTML utama di awal, dan konten di dalamnya diperbarui secara dinamis tanpa perlu memuat ulang seluruh halaman.
React JS pada dasarnya adalah pustaka (library) untuk membangun antarmuka pengguna dan tidak memiliki fitur bawaan untuk menangani perpindahan halaman (routing). Untuk membangun aplikasi berskala besar dengan banyak tampilan, pengembang membutuhkan alat tambahan agar URL di browser dapat sinkron dengan komponen yang ditampilkan di layar. Di sinilah React Router hadir sebagai standar industri untuk menangani navigasi dan routing dalam ekosistem React, memungkinkan pengembang menciptakan transisi halaman yang mulus dan instan layaknya aplikasi native.
2. Alat dan Bahan
a. Perangkat Lunak
- Terminal / Command Prompt
- Text Editor (VS Code)
- Web Browser (Firefox)
- Node js (untuk runtime JS)
b. Perangkat Keras
- Laptop / Komputer.
3. Pembahasan
3.1 Apa itu Routing di React JS?
Routing dalam React JS adalah proses mengelola navigasi antar tampilan (komponen) yang berbeda dalam sebuah aplikasi web berdasarkan URL atau alamat web yang sedang diakses. Berbeda dengan routing tradisional yang diarahkan oleh server, routing di React ditangani sepenuhnya di sisi klien (client-side routing). Saat pengguna mengklik tautan, React Router akan mencegat permintaan tersebut, mengubah URL di bilah alamat browser, dan langsung merender komponen yang sesuai tanpa menghubungi server untuk meminta halaman HTML baru.
3.2 Konsep Dasar React Router DOM
Untuk menerapkan routing di React, kita menggunakan paket bernama react-router-dom. Ada beberapa komponen utama yang wajib dipahami:
1. BrowserRouter: Komponen pembungkus utama yang mendengarkan perubahan pada URL browser dan menyinkronkannya dengan UI.
2. Routes: Komponen yang membungkus semua rute yang ada. Ia akan mencari rute yang cocok dengan URL saat ini.
3. Route: Komponen yang mendefinisikan hubungan antara jalur (path) URL tertentu dengan komponen yang akan ditampilkan (element).
4. Link: Pengganti tag anchor (a href) tradisional. Link digunakan untuk menavigasi antar halaman tanpa memicu pemuatan ulang seluruh halaman (full page reload).
3.3 Langkah Instalasi dan Implementasi Dasar
Langkah pertama adalah menginstal paket react-router-dom melalui terminal di dalam direktori proyek React Anda:
npm install react-router-dom
Setelah terinstal, berikut adalah contoh implementasi dasarnya:
import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
1. Buat beberapa komponen halaman sederhana
function Beranda() {
return <h2>Ini adalah Halaman Beranda</h2>;
}
function Tentang() {
return <h2>Ini adalah Halaman Tentang Kami</h2>;
}
function TidakDitemukan() {
return <h2>Halaman 404 - Tidak Ditemukan</h2>;
}
2. Konfigurasi Routing di Komponen Utama
function App() {
return (
<BrowserRouter>
<div>
{/* Navigasi Menggunakan Link */}
<nav>
<ul>
<li><Link to="/">Beranda</Link></li>
<li><Link to="/tentang">Tentang</Link></li>
</ul>
</nav>
{/* Definisi Rute */}
<Routes>
<Route path="/" element={<Beranda />} />
<Route path="/tentang" element={<Tentang />} />
{/* Rute wildcard untuk menangani URL yang tidak ada */}
<Route path="*" element={<TidakDitemukan />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
3.4 Praktik Terbaik
- Susun Rute dengan Rapi: Untuk aplikasi yang besar, pisahkan konfigurasi rute ke dalam file tersendiri (misalnya routes.js) agar komponen App.js tidak terlalu penuh dan tetap mudah dibaca.
- Gunakan Rute Dinamis: Manfaatkan parameter URL (misalnya path="/produk/:id") untuk membuat halaman detail yang datanya menyesuaikan dengan ID yang diberikan.
- Manfaatkan NavLink untuk Menu: Gunakan komponen NavLink sebagai pengganti Link jika Anda ingin memberikan gaya khusus (seperti warna berbeda) pada menu navigasi yang sedang aktif.
- Proteksi Halaman (Protected Routes): Buat komponen pembungkus khusus untuk rute yang membutuhkan autentikasi (misalnya halaman dasbor hanya bisa diakses jika pengguna sudah login).
3.5. Kesimpulan
Routing adalah komponen krusial dalam pengembangan Single Page Application menggunakan React JS. Melalui pustaka React Router DOM, pengembang dapat dengan mudah mendefinisikan alur navigasi, menghubungkan URL dengan komponen tertentu, dan menangani parameter dinamis. Pendekatan client-side routing ini tidak hanya membuat struktur aplikasi menjadi lebih terorganisir, tetapi juga secara drastis meningkatkan performa dan kenyamanan pengguna karena transisi antar halaman terjadi seketika tanpa jeda pemuatan dari server.
4. Daftar Pustaka
Petani Kode. (2021). Tutorial React Router: Cara Membuat Routing di React JS. https://www.petanikode.com/react-router/.
Dicoding Indonesia. (2023). Belajar Dasar React: Routing pada Aplikasi React. https://www.dicoding.com/.
Niagahoster. (2022). Tutorial React Router untuk Membuat Navigasi Halaman. https://www.niagahoster.co.id/blog/react-js/.
Dewaweb. (2021). Cara Menggunakan React Router untuk Routing Halaman. https://www.dewaweb.com/blog/react-js/.
0 Komentar