Apa Itu React Router DOM? Fungsi, Komponen & Instalasi
Irhan Hisyam Dwi Nugroho
•
21 August 2025
•
778
Kalau kamu lagi ngembangin aplikasi React, pasti butuh sistem navigasi yang rapi dan efisien. Nah, di sinilah React Router DOM jadi andalan buat ngatur perpindahan antar halaman tanpa reload.
Banyak developer pemula masih bingung bedain antara komponen <Route> dan <Link>, atau gimana caranya setup routing yang dinamis. Padahal, kalau udah ngerti dasarnya, penggunaannya nggak sesulit kelihatannya.
Di artikel ini, MinDi bakal kupas tuntas apa itu React Router DOM, fungsinya, komponen-komponennya, sampai cara install dan implementasinya. Yuk, kita bahas bareng dari dasar biar makin paham!
Baca juga: 10 Text Editor Terbaik untuk Web Developer (2025)
Apa Itu React Router DOM?
React Router DOM adalah library khusus untuk React yang digunakan dalam mengatur navigasi antar halaman di aplikasi web tanpa perlu reload ulang.
Dengan bantuan library ini, developer bisa membuat pengalaman pengguna yang lebih mulus layaknya aplikasi native.
React Router DOM bekerja dengan cara mengelola URL dan menampilkan komponen tertentu sesuai rute yang diakses.
Jadi, saat user berpindah halaman, data diubah secara dinamis tanpa me-refresh seluruh halaman.
Baca juga: Panduan Memilih Bootcamp Full Stack Developer yang Tepat
Fungsi Utama React Router DOM
Saat bikin aplikasi web berbasis React, kamu butuh cara supaya user bisa pindah halaman tanpa harus ngereload semuanya.
Nah, di sinilah React Router DOM jadi kunci penting dalam membangun navigasi modern. Berikut ini beberapa fungsi utamanya:
1. Mengelola Navigasi Tanpa Reload
React Router DOM memungkinkan user berpindah antar halaman tanpa perlu me-refresh browser.
Ini bikin aplikasi terasa lebih cepat dan seamless, kayak aplikasi mobile. Proses navigasi terjadi secara dinamis lewat perubahan URL dan render komponen yang sesuai.
2. Menampilkan Komponen Berdasarkan Rute URL
Dengan library ini, kamu bisa menentukan komponen mana yang harus tampil sesuai dengan URL yang diakses.
Misalnya, saat user buka /about, maka komponen About akan otomatis dirender. Ini sangat berguna buat bikin struktur aplikasi yang rapi dan terorganisir.
3. Mendukung Routing Dinamis dan Nested
React Router DOM mendukung nested routing, jadi kamu bisa bikin struktur rute di dalam rute. Fitur ini berguna banget buat aplikasi kompleks yang butuh tampilan bersarang. Selain itu, kamu juga bisa atur parameter dinamis langsung di URL-nya.
4. Memudahkan Navigasi Manual dengan Link dan Navigate
Daripada pakai tag <a>, kamu bisa pakai <Link> atau useNavigate() buat pindah halaman tanpa reload.
Ini bikin kontrol navigasi jadi lebih fleksibel dan terintegrasi langsung dengan React. Cocok banget buat aplikasi single page yang butuh banyak interaksi.
Baca juga: Ingin Belajar Front End Development? Cek Roadmapnya di sini!
Komponen React Router DOM
Sumber: Canva
Biar bisa pakai React Router DOM dengan optimal, kamu perlu kenal dulu komponen-komponen utamanya. Yuk, simak lima komponen yang paling sering digunakan:
1. <BrowserRouter>
Komponen ini adalah pembungkus utama yang mengaktifkan fitur routing di aplikasi React. Biasanya diletakkan paling atas di dalam struktur aplikasi, tepatnya di sekitar root component.
Tanpa ini, komponen-komponen routing lain seperti <Route> dan <Link> nggak akan bisa jalan.
2. <Routes>
<Routes> adalah tempat kumpulan <Route> disusun, menggantikan <Switch> di versi sebelumnya.
Ia memastikan hanya satu rute yang dirender sesuai URL yang cocok. Ini bikin navigasi jadi lebih efisien dan tidak bentrok antar halaman.
3. <Route>
Komponen ini berfungsi menentukan komponen mana yang ditampilkan berdasarkan path di URL.
Kamu bisa atur path-nya, dan isi dengan elemen React yang ingin dirender. Ini adalah inti dari bagaimana halaman ditampilkan secara dinamis di aplikasi kamu.
4. <Link>
Daripada pakai tag <a> biasa, kamu bisa pakai <Link> untuk navigasi antar halaman.
Keuntungannya, prosesnya lebih cepat dan tidak menyebabkan reload halaman. <Link> bekerja bareng <BrowserRouter> buat ngatur arah navigasi sesuai path.
5. <Navigate>
Digunakan untuk redirect user dari satu halaman ke halaman lain secara otomatis. Ini sering dipakai setelah user login, logout, atau mengakses rute yang tidak sesuai.
Dengan <Navigate>, kamu bisa kontrol alur aplikasi tanpa interaksi langsung dari user.
Baca juga: 12 Bahasa Pemrograman Front End Teratas & Terpopuler 2024
Langkah-Langkah Implementasi React Router DOM
Warga Bimbingan, setelah berhasil install React Router DOM, langkah selanjutnya adalah mengintegrasikannya ke dalam struktur aplikasi React kamu. Berikut ini langkah-langkah praktis implementasinya, lengkap dengan contoh kode dan penjelasan detail:
1. Install React Router DOM
Langkah pertama tentu install package-nya dulu di project React kamu. Pastikan kamu berada di dalam folder project sebelum menjalankan perintah ini.
npm install react-router-dom |
Perintah ini akan menambahkan React Router DOM versi terbaru ke project kamu, biasanya versi 6.x.x, dan siap digunakan langsung.
2. Bungkus Aplikasi dengan <BrowserRouter>
Agar fitur routing aktif, kamu perlu membungkus seluruh aplikasimu dengan <BrowserRouter>. Biasanya ini dilakukan di file main.jsx (Vite) atau index.js (CRA).
import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <BrowserRouter> <App /> </BrowserRouter> ); |
<BrowserRouter> berfungsi sebagai router provider, yang memungkinkan semua komponen di dalamnya menggunakan fitur navigasi.
3. Gunakan <Routes> dan <Route> di App.js
Setelah itu, kamu bisa mulai definisikan path dan komponen yang ingin ditampilkan. Semua path dideklarasikan di dalam <Routes> dan masing-masing dibungkus oleh <Route>.
import { Routes, Route } from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; function App() { return ( <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> ); } |
Di sini, saat user membuka /, komponen Home akan ditampilkan. Kalau ke /about, maka halaman About yang akan dirender.
4. Navigasi Antar Halaman dengan <Link>
Daripada pakai tag <a>, kamu bisa pakai <Link> supaya navigasi tidak menyebabkan reload. Komponen ini mirip tombol, tapi terintegrasi langsung dengan routing.
import { Link } from 'react-router-dom'; function Navbar() { return ( <nav> <Link to="/">Beranda</Link> <Link to="/about">Tentang</Link> </nav> ); } |
Dengan <Link>, perpindahan antar halaman jadi cepat dan terasa seperti aplikasi native.
Baca juga: Cara Menjadi Web Developer Freelance: Panduan Pemula
Ingin Jadi Full Stack Developer Handal?
Setelah memahami React Router DOM beserta fungsi, komponen, dan cara instalasinya, ini saat yang tepat untuk mengasah kemampuan pengembangan web kamu secara menyeluruh.
Ikuti Bootcamp Full Stack Web Development di dibimbing.id. Kamu akan belajar mulai dari dasar HTML, CSS, JavaScript, React, hingga backend dan database dengan pendekatan praktis dan aplikatif.
Belajar langsung dari mentor berpengalaman dan dibekali kurikulum yang dirancang agar kamu siap kerja di dunia industri.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni hingga 96%, peluang kariermu di bidang teknologi akan semakin terbuka luas.
Jangan lewatkan kesempatan ini. Daftar sekarang disini dan mulai perjalananmu menjadi Full Stack Developer handal bersama #BimbingSampeJadi.
Referensi
- What is react-router-dom ? [Buka]
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
