Panduan Awal untuk Routing di React: BrowserRouter

Hai teman-teman pengembang React yang bersemangat! Hari ini, kita akan memulai perjalanan menarik ke dunia routing dalam aplikasi React. Jangan khawatir jika Anda masih pemula di bidang programming; saya akan menjadi panduan ramah Anda, menjelaskan segala sesuatunya secara langkah demi langkah. Jadi, sajikanlah secangkir kopi, dan mari kita masuk ke dalamnya!

Konsep Router

Apa Itu Routing?

Imaginasi Anda berada di sebuah perpustakaan besar. Anda ingin menemukan buku tertentu, tapi Anda tidak tahu dimana itu berada. Itulah saat katalog perpustakaan berguna. Itu memberitahu Anda tepat dimana rak buku itu berada. 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设想一下，您正在构建一个带有不同页面的个人网站：Beranda, Tentang, dan Hubungi. Tanpa routing, Anda harus secara manual menampilkan dan menyembunyikan komponen berdasarkan tindakan pengguna. Itu 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 bernama BrowserRouter. Itu bagian dari pustaka react-router-dom dan membantu kita implementasikan routing dalam aplikasi React kita. Bayangkan 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 mulai 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 mengganti namanya menjadi Router untuk kepentingan kepraktisan. Kemudian kita membungkus komponen App kita dengan Router. Ini menyiapkan konteks routing untuk seluruh aplikasi kita.

Langkah 3: Mendefinisikan Routes

Sekarang, mari kita tentukan beberapa rute di 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 rute yang dirender pada saat yang sama.
• Setiap Route komponen menentukan pemetaan antara path URL dan komponen React.
• Prop exact pada rute beranda 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="/">Beranda</Link></li>
<li><Link to="/about">Tentang</Link></li>
<li><Link to="/contact">Hubungi</Link></li>
</ul>
</nav>
);

export default Navigation;

Di sini, kita menggunakan komponen Link dari react-router-dom. Itu seperti tag <a>, tapi itu menghindari reload halaman saat ber navigasi.

Langkah 5: Menggabungkan Semua

Mari kita perbarui komponen App kita untuk menambahkan 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 menutupi 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. Rute Tertanam

Anda dapat menanam rute di dalam komponen. Ini 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 melakukan navigasi 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 ini adalah tabel praktis yang menggabungkan metode routing utama yang kita diskusikan:

Metode	Tujuan	Contoh
<BrowserRouter>	Mengbungkus aplikasi untuk mengaktifkan routing	<BrowserRouter><App /></BrowserRouter>
<Route>	Mendefinisikan rute	<Route path="/about" component={About} />
<Switch>	Memastikan hanya satu rute dirender	<Switch><Route ... /><Route ... /></Switch>
<Link>	Membuat tautan ke rute	<Link to="/about">Tentang</Link>
useParams()	Mengakses parameter URL	let { id } = useParams();
useHistory()	Navigasi programmatik	history.push('/dashboard');

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

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

Credits: Image by storyset