ReactJS #16: React Router Part 1 – Navigasi Antar Halaman

byFerdian Rahabista -
0

ReactJS #16: React Router Part 1

Berpindah Halaman dalam Satu Aplikasi (Navigasi)

Halo, navigator handal! 🧭

Selama ini kita hanya membuat satu halaman saja. Padahal aplikasi sungguhan punya banyak halaman: Halaman Utama, Halaman Profil, Halaman Tentang, dll. Nah, bagaimana caranya berpindah-pindah halaman tanpa reload browser? Jawabannya adalah React Router!

💡 Analogi Sederhana: Bayangkan aplikasi React-mu adalah sebuah gedung bertingkat. React Router adalah peta dan lift yang membantumu berpindah dari lantai 1 (halaman Home) ke lantai 2 (halaman About) tanpa harus keluar gedung dan masuk lagi. Praktis, kan? [citation:2]

🧐 Apa Itu React Router?

React Router adalah library (perpustakaan) yang memungkinkan kita membuat navigasi antar halaman dalam aplikasi React. Dengan React Router, kita bisa:

  • Berpindah halaman tanpa reload (seperti aplikasi profesional).
  • URL berubah sesuai halaman yang aktif.
  • Tombol back/forward browser berfungsi normal.
  • Membuat menu navigasi dengan tautan-tautan.

React Router versi terbaru adalah v6. Kita akan pakai versi ini karena lebih sederhana dan canggih. [citation:1][citation:4]

📦 Langkah 1: Install React Router

Buka terminal di proyek React-mu, lalu jalankan perintah ini:

npm install react-router-dom

Perintah ini akan mengunduh dan memasang React Router ke proyekmu. [citation:3][citation:7]

🏗️ Langkah 2: Membuat Halaman-halaman Sederhana

Sebelum kita atur routing, kita perlu membuat beberapa halaman. Buat folder baru src/pages, lalu buat tiga file:

📄 src/pages/Home.js

function Home() { return ( <div className="page-box"> <h2>🏠 Halaman Utama</h2> <p>Selamat datang di aplikasi kita!</p> </div> ); } export default Home;

📄 src/pages/About.js

function About() { return ( <div className="page-box"> <h2>📖 Tentang Aplikasi</h2> <p>Aplikasi ini dibuat untuk belajar React Router.</p> </div> ); } export default About;

📄 src/pages/Contact.js

function Contact() { return ( <div className="page-box"> <h2>📞 Hubungi Kami</h2> <p>Email: halo@example.com</p> </div> ); } export default Contact;

⚙️ Langkah 3: Mengatur Router di App.js

Sekarang saatnya mengatur routing. Buka src/App.js dan ganti dengan kode berikut:

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; import Contact from './pages/Contact'; import './App.css'; function App() { return ( <BrowserRouter> <div className="App"> <h1>🧭 Belajar React Router</h1> {/* Menu Navigasi */} <nav className="nav-links"> <Link to="/" className="nav-link-item">🏠 Home</Link> <Link to="/about" className="nav-link-item">📖 About</Link> <Link to="/contact" className="nav-link-item">📞 Contact</Link> </nav> {/* Tempat halaman ditampilkan */} <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> </Routes> </div> </BrowserRouter> ); } export default App;

Penjelasan Kode: [citation:2][citation:4]

  • BrowserRouter: Membungkus seluruh aplikasi agar fitur routing bisa digunakan. Ibaratnya, ini adalah "peta gedung" untuk aplikasi kita.
  • Routes: Tempat kita mendaftarkan semua rute (jalan) yang tersedia. Akan memilih satu rute yang cocok dengan URL.
  • Route: Mendefinisikan satu rute. path adalah URL-nya, element adalah komponen yang akan ditampilkan.
  • Link: Digunakan untuk membuat tautan navigasi. Berbeda dengan tag <a> biasa, Link tidak me-reload halaman. [citation:7]

🎯 Langkah 4: Menambahkan Halaman Tidak Ditemukan (404)

Kalau pengguna mengunjungi URL yang tidak ada, sebaiknya kita tampilkan halaman khusus. Buat file src/pages/NotFound.js:

function NotFound() { return ( <div className="page-box" style={{ borderColor: '#f44336' }}> <h2>😵 404 - Halaman Tidak Ditemukan</h2> <p>Maaf, halaman yang kamu cari tidak ada.</p> <Link to="/" className="nav-link-item">Kembali ke Home</Link> </div> ); } export default NotFound;

Lalu tambahkan rute khusus di App.js:

import NotFound from './pages/NotFound'; // Di dalam komponen App, di dalam <Routes>, tambahkan di bagian paling bawah: <Route path="*" element={<NotFound />} />

path="*" artinya "cocokkan semua URL yang tidak cocok dengan rute di atas". [citation:1][citation:4]

✨ Langkah 5: Membuat Menu dengan NavLink (Tambahan)

React Router juga punya komponen NavLink yang mirip Link, tapi bisa tahu apakah tautan sedang aktif atau tidak. Cocok untuk menu navigasi. Ganti bagian menu dengan NavLink:

import { NavLink } from 'react-router-dom'; // Ganti Link dengan NavLink <nav className="nav-links"> <NavLink to="/" className={({ isActive }) => isActive ? 'nav-link-item active' : 'nav-link-item'} >🏠 Home</NavLink> <NavLink to="/about" className={({ isActive }) => isActive ? 'nav-link-item active' : 'nav-link-item'} >📖 About</NavLink> <NavLink to="/contact" className={({ isActive }) => isActive ? 'nav-link-item active' : 'nav-link-item'} >📞 Contact</NavLink> </nav>

Lalu tambahkan CSS untuk class active di App.css:

.nav-link-item.active { background-color: #f7b731; box-shadow: 0 8px 0 #b37b2e; transform: translateY(2px); }

Sekarang menu yang sedang aktif akan berwarna oranye. [citation:2][citation:9]

🧪 Langkah 6: Uji Coba

Jalankan aplikasi dengan npm start. Coba klik menu Home, About, Contact. Perhatikan:

  • URL di browser berubah sesuai halaman.
  • Konten berganti tanpa reload halaman.
  • Tombol back/forward browser membawamu ke halaman sebelumnya.
  • Coba ketik URL yang tidak ada (misal /coba), akan muncul halaman 404. [citation:1]
🎮 Demo Konsep
🏠 Home 📖 About 📞 Contact

📖 Halaman About

Lihat! Menu About aktif dengan warna berbeda.

🧩 Penjelasan Komponen Router

  • BrowserRouter: Router paling umum untuk aplikasi web. Menggunakan URL bersih (tanpa #). [citation:2][citation:5]
  • HashRouter: Alternatif yang menambahkan # di URL. Berguna jika server tidak bisa diatur.
  • MemoryRouter: Menyimpan riwayat di memori, tidak mengubah URL. Biasanya untuk testing.

Kita pakai BrowserRouter karena paling cocok untuk aplikasi web modern. [citation:5]

🧪 Latihan: Tambah Halaman Baru

Coba buat halaman Galeri yang menampilkan beberapa foto (bisa pakai emoji atau placeholder). Tambahkan:

  1. File src/pages/Gallery.js dengan konten sederhana.
  2. Rute baru di App.js dengan path /gallery.
  3. Tautan menu menggunakan NavLink.

Hasilnya, kamu akan punya 4 halaman yang bisa dinavigasi!

💡 Tips: Perhatikan urutan rute dalam <Routes>. React Router akan mencocokkan dari atas ke bawah. Letakkan rute yang lebih spesifik di atas, dan rute umum (seperti /) atau catch-all (*) di bawah. [citation:2]

🚀 Kesimpulan

  • React Router memungkinkan kita membuat navigasi multi-halaman dalam SPA (Single Page Application).
  • Komponen utama: BrowserRouter, Routes, Route, Link, dan NavLink. [citation:4]
  • Link digunakan untuk berpindah halaman tanpa reload.
  • NavLink bisa menambahkan gaya khusus untuk tautan yang aktif.
  • Rute path="*" berguna untuk menangani halaman tidak ditemukan (404). [citation:1]

Di artikel selanjutnya (Part 2), kita akan belajar tentang rute dinamis (misal: /user/123) dan cara mengambil parameter dari URL. Sampai jumpa!

✨ Dengan React Router, aplikasimu punya banyak halaman dalam satu gedung! ✨
Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال