ReactJS - BrowserRouter: Panduan Pemula untuk Routing dalam React

Hai sana, para pengembang React yang bersemangat! Hari ini, kita akan memulai perjalanan menarik ke dunia routing dalam aplikasi React. Jangan khawatir jika Anda baru saja memulai dalam programming; saya akan menjadi panduan ramah Anda, menjelaskan segala sesuatu secara langkah demi langkah. Jadi, ambil secangkir kopi, dan mari kita masuk ke dalam!

ReactJS - BrowserRouter

Konsep Router

Apa Itu Routing?

Imaginasi Anda berada di sebuah perpustakaan besar. Anda ingin menemukan buku tertentu, tapi Anda tidak tahu di mana itu berada. Itu adalah saat katalog perpustakaan berguna. Itu memberitahu Anda tepat di mana rak mana yang Anda cari. Dalam aplikasi web, routing bekerja sama seperti itu. Itu seperti peta yang memberitahu aplikasi Anda komponen mana yang harus ditampilkan berdasarkan URL.

Mengapa Kita Butuh Routing?

mari katakan Anda sedang membuat website pribadi dengan halaman yang berbeda: Home, About, dan Contact. Tanpa routing, Anda harus secara manual menampilkan dan menyembunyikan komponen berdasarkan tindakan pengguna. Itu sangat ribet dan berisiko kesalahan. Routing otomatisasi proses ini, membuat aplikasi Anda lebih terorganisir dan user-friendly.

Memasuki BrowserRouter

Dalam dunia React, kita memiliki alat yang fantastik yang disebut BrowserRouter. Itu bagian dari pustaka react-router-dom dan membantu kita mengimplementasikan routing dalam aplikasi React kita. Berpikir tentang itu sebagai petugas perpustakaan pribadi aplikasi Anda, selalu siap untuk mengarahkan pengguna ke "buku" yang benar (atau dalam kasus kita, komponen).

Cara Menggunakan Routers

Sekarang kita mengerti konsepnya, mari kita merusaknya dengan beberapa kode!

Langkah 1: Instalasi

Pertama-tama, kita perlu menginstal paket react-router-dom. Buka terminal Anda dan jalankan:

npm install react-router-dom

Langkah 2: Menyiapkan BrowserRouter

Mari kita mulai dengan membungkus komponen utama App kita dengan BrowserRouter. Ini adalah cara:

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const Root = () => (
<Router>
<App />
</Router>
);

export default Root;

Dalam contoh ini, kita mengimpor BrowserRouter dan mengubah namanya menjadi Router untuk keperluan sederhana. Kemudian kita membungkus komponen App kita dengan Router. Ini menyiapkan konteks routing untuk seluruh aplikasi kita.

Langkah 3: Menentukan Routes

Sekarang, mari kita tentukan beberapa route dalam komponen App kita:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

mari kitauraikan ini:

Kita mengimpor Route dan Switch dari react-router-dom.
Switch memastikan bahwa hanya satu route yang diproses pada saat yang sama.
Setiap Route komponen menentukan mapping antara path URL dan komponen React.
Prop exact pada route home memastikan itu hanya cocok dengan path "/" tepat.

Langkah 4: Membuat Navigasi

Sekarang, mari kita tambahkan beberapa navigasi ke aplikasi kita:

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

const Navigation = () => (
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
);

export default Navigation;

Di sini, kita menggunakan komponen Link dari react-router-dom. Itu seperti tag <a>, tapi itu mencegah halaman dari reloading saat menavigasi.

Langkah 5: Menggabungkan Segala Sesuatu

Mari kita perbarui komponen App kita untuk mencakup navigasi:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</div>
);

export default App;

Dan itu saja! Anda memiliki aplikasi React dasar dengan routing yang disiapkan.

Teknik Routing Tingkat Lanjut

Sekarang kita telah melihat dasar-dasar, mari kita lihat beberapa teknik tingkat lanjut:

1. Parameter URL

kadang-kadang, Anda ingin mengirim data melalui URL. Misalnya, halaman profil pengguna:

<Route path="/user/:id" component={UserProfile} />

Dalam komponen UserProfile Anda, Anda dapat mengakses parameter id seperti ini:

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

const UserProfile = () => {
let { id } = useParams();
return <h1>Profil Pengguna untuk pengguna {id}</h1>;
};

2. Routes Tertanam

Anda dapat menanamkan routes dalam komponen. Ini sangat berguna untuk layout yang kompleks:

const App = () => (
<div>
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</div>
);

const Users = () => (
<div>
<h1>Pengguna</h1>
<Switch>
<Route exact path="/users" component={UserList} />
<Route path="/users/:id" component={UserProfile} />
</Switch>
</div>
);

3. Navigasi Programmatik

kadang-kadang Anda ingin menavigasi secara programmatik, misalnya setelah pengiriman formulir:

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

const LoginForm = () => {
let history = useHistory();

const handleSubmit = () => {
// ... penanganan logika login
history.push('/dashboard');
};

return (
<form onSubmit={handleSubmit}>
{/* field formulir */}
</form>
);
};

Tabel Metode Routing

Berikut adalah tabel praktis yang menggabungkan metode routing utama yang kita diskusikan:

Metode	Tujuan	Contoh
`<BrowserRouter>`	Menyediakan routing	`<BrowserRouter><App /></BrowserRouter>`
`<Route>`	Menentukan route	`<Route path="/about" component={About} />`
`<Switch>`	Memastikan hanya satu route diproses	`<Switch><Route ... /><Route ... /></Switch>`
`<Link>`	Membuat tautan ke route	`<Link to="/about">About</Link>`
`useParams()`	Mengakses parameter URL	`let { id } = useParams();`
`useHistory()`	Navigasi programmatik	`history.push('/dashboard');`

Dan itu saja, teman-teman! Kita telah melakukan perjalanan melalui dasar-dasar routing dalam React menggunakan BrowserRouter. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini dalam proyek Anda sendiri.

Selamat coding, dan semoga rute Anda selalu mengarah ke komponen yang benar!

Credits: Image by storyset