Blogger Jateng
Home / Tutorial

Pengantar ke React Router

Salah satu library yang paling umum dan kuat untuk menangani perutean dalam aplikasi React adalah React Router. React Router memungkinkan pengembangan aplikasi halaman tunggal dinamis (SPA) yang terasa lebih seperti situs web multi-halaman tradisional. React Router membantu membangun pengalaman pengguna dengan mengelola navigasi dan komponen rendering, berdasarkan URL aplikasi saat ini tanpa harus memuat ulang seluruh halaman. Meliputi dasar-dasar React Router termasuk konsep-konsep utamanya dan juga cara untuk mulai menggunakannya.

Apa itu React Router?

React Router adalah sebuah library perutean resmi untuk react, Declarative. Ini memungkinkan kita untuk mengasosiasikan jalur URL dengan komponen tertentu di React dan memfasilitasi navigasi yang mulus antara tampilan yang berbeda. React Router dibangun di atas JS dan alih-alih mengambil proxy HTML setiap kali Anda menavigasi ke halaman baru seperti yang digunakan oleh situs web tradisional, React Router mengimplementasikan navigasi melalui JS dan memperbarui tampilan tanpa me-refresh seluruh halaman.

sumber: iltekkomputer.com

Mengapa Menggunakan React Router?

  1. Aplikasi Halaman Tunggal: React Router menyederhanakan pembuatan SPA untuk waktu pemuatan yang lebih cepat dan pengalaman pengguna yang lebih lancar.
  2. Sintaksis Deklaratif: Gunakan untuk menulis rute yang lebih jelas dan menavigasi dengan mudah.
  3. Perutean Dinamis: React Router mendukung pencocokan rute dinamis, yang membantu para pengembang untuk membangun sistem navigasi yang fleksibel dan kuat.
  4. Fitur Bawaan: Elemen Esensial dengan jangkar tingkat atas yang memungkinkan tata letak penempatan komponen yang fleksibel. Perutean Bersarang, parameter rute, dan perutean terprogram semuanya sudah ada di dalam React.

Konsep Inti dari React Router

Berikut ini adalah beberapa konsep inti dari React Router yang perlu Anda pahami agar dapat menggunakannya secara efisien:

1. Rute dan Komponen Rute

Dengan kata lain, route mendefinisikan jalur mana dalam url yang menuju ke komponen mana. Komponen Route dalam React Router digunakan untuk menentukan apa yang harus di-render ketika aplikasi dicocokkan dengan path tertentu. Sebagai contoh:

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

<Route path="/about" element={<About />} />

Dalam kasus ini, ketika pengguna menavigasi ke /about, komponen About akan di-render.

2. BrowserRouter

Pertama, Anda akan membungkus aplikasi Anda dengan komponen BrowserRouter, ini adalah komponen utama untuk menggunakan fungsionalitas React Router. Komponen ini mendengarkan perubahan pada riwayat peramban dan merender komponen yang sesuai tergantung pada URL.

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

<BrowserRouter>
  {/* Your Routes go here */}
</BrowserRouter>

3. Tautan dan Navigasi

Komponen Link melakukan perutean deklaratif, memungkinkan navigasi antar rute tanpa me-refresh halaman:

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

<Link to="/contact">Contact Us</Link>

4. Rute Bersarang

React Router mendukung nesting, di mana sebuah rute dapat merender rute-rute turunan. Hal ini berguna untuk membuat tampilan hirarki:

<Route path="/dashboard" element={<Dashboard />}>

  <Route path="settings" element={<Settings />} />

  <Route path="profile" element={<Profile />} />

</Route>

5. Parameter Rute

Jalur Dinamis dengan Parameter Rute Sebagai contoh, sebuah aplikasi blog dapat menggunakan parameter rute untuk menampilkan masing-masing postingan:

<Route path="/post/:id" element={<Post />} />

Kita dapat menggunakan :id ini pada path di dalam komponen Post dengan hook useParams. 

Memasang React Router

React Router sangat mudah untuk digunakan:

1. (Kembali ke Daftar Isi) Menyiapkan Perpustakaan: Gunakan perintah berikut untuk  menambahkan React Router ke dalam proyek Anda:

npm install react-router-dom  

 


2. Bungkus Aplikasi Anda: Bungkus aplikasi React Anda di dalam BrowserRouter:

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

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

export default App;

3. Tentukan Rute Anda: Jalur URL apa yang seharusnya memicu komponen mana yang akan di-render? 

Kesimpulan

React Router: ini adalah bagian penting dari aplikasi React di mana Anda membutuhkan navigasi yang jelas dan aktif. React Router memungkinkan navigasi yang lancar di SPA, dan memahami konsep seperti rute, rute bersarang, dan komponen navigasi yang dapat membantu pengembang membangun SPA secara efisien. Dengan menyediakan sintaks deklaratif yang sederhana dan serangkaian fitur yang kuat, React Router terus menjadi solusi standar untuk mengelola perutean dalam aplikasi web modern. React Router menyederhanakan proses navigasi dan harus diketahui oleh setiap pengembang React, tidak peduli apakah Anda membangun situs web sederhana atau aplikasi yang kompleks.