Dalam aplikasi React, pemformatan URL dan routing memainkan peran penting dalam menavigasi halaman dan menampilkan konten yang sesuai. Untuk mengatur routing di React, kita bisa menggunakan library. Berikut adalah panduan dasar tentang cara menggunakan untuk memformat URL dan menanganinya di aplikasi React Anda. React Router React Router routing
Install React Router
Buka direktori proyek Anda di terminal dan jalankan perintah berikut untuk menginstal: React Router npm install react-router-dom
Impor komponen yang diperlukan dari ke dalam komponen React Anda. React Router
Tentukan Rute
Gunakan komponen untuk membungkus aplikasi React Anda dan menyetel format URL dasar. <BrowserRouter>
Gunakan <Route>
komponen untuk menentukan rute dalam aplikasi Anda.
Contoh:
Tentukan Link s
Gunakan komponen untuk membuat navigasi di aplikasi Anda. <Link>
link
Contoh:
Parameter Jalur Akses
Gunakan <Route>
komponen dengan path
atribut dalam format /users/:id
untuk mengakses parameter jalur.
Di dalam komponen yang ditentukan oleh <Route>
, Anda dapat menggunakan useParams()
untuk mengakses nilai parameter jalur.
Contoh:
Gunakan Switch dan Redirect
Gunakan komponen untuk merender rute pertama yang cocok dengan jalur saja. <Switch>
Gunakan komponen untuk pengguna dari satu jalur yang ditentukan ke yang lain. <Redirect>
redirect
Contoh:
Ini adalah beberapa konsep dasar pemformatan URL dan routing dalam React menggunakan. Dengan memanfaatkan, Anda dapat membuat aplikasi React yang fleksibel dengan kemampuan untuk menavigasi dan menampilkan berbagai konten berdasarkan URL. React Router React Router