Masalah utama yang terkait dengan parameter URL React Router adalah sulit digunakan dalam rute dinamis. Ini karena parameter URL bersifat statis dan tidak dapat diubah setelah rute dibuat. Artinya, jika pengguna perlu mengakses halaman berbeda dengan parameter berbeda, mereka perlu membuat rute baru untuk setiap kombinasi parameter. Selain itu, saat menggunakan parameter URL, akan sulit untuk melacak semua kemungkinan kombinasi dan memastikan bahwa setiap kombinasi ditangani dengan benar oleh router.
import {
BrowserRouter as Router,
Route,
Link,
useParams
} from "react-router-dom";
const App = () => {
return (
<Router>
<div>
<Route path="/user/:username" component={UserPage} />
</div>
</Router>
);
};
const UserPage = () => {
let { username } = useParams(); // Get the username from the URL.
return (
<div>Hello, {username}!</div> // Render a greeting with the username.
);
};
Kode ini menyiapkan React Router untuk merender halaman dengan nama pengguna dari URL.
1. Baris pertama mengimpor komponen dari pustaka React Router DOM.
2. Fungsi App mengembalikan komponen Router dengan komponen Route di dalamnya, yang menentukan bahwa setiap URL yang diawali dengan "/user/" harus merender komponen UserPage.
3. Fungsi UserPage menggunakan useParams() untuk mendapatkan nama pengguna dari URL, lalu merender salam menggunakan nama pengguna tersebut.
parameter URL
Parameter URL di React Router adalah potongan data yang diteruskan ke rute sebagai bagian dari URL. Mereka mengizinkan pengembang untuk meneruskan informasi dinamis ke rute, seperti ID atau string kueri. Ini dapat digunakan untuk membuat rute dinamis yang dapat digunakan untuk hal-hal seperti menampilkan item tertentu dari database atau memfilter konten berdasarkan input pengguna. React Router menyediakan alat untuk mengakses dan memanipulasi parameter URL, membuatnya mudah digunakan dalam aplikasi Anda.
Bagaimana Anda mendapatkan parameter URL dari rute di Bereaksi
Di React Router, Anda dapat mengakses parameter URL dari rute menggunakan hook useParams. Pengait ini mengembalikan objek yang berisi pasangan nilai kunci dari parameter URL. Misalnya, jika rute Anda adalah /user/:id, Anda dapat mengakses parameter id dengan useParams().id.
