Memahami Dan Mengatur Rute Di React
Belajar cara membuat rute di react hingga Anda bisa membuat program dengan halaman dan perutean di React.
Rute di React memungkinkannya development untuk membikin program satu halaman dengan kekuatan untuk bernavigasi antara banyak halaman tak perlu berisi ulangi halaman. track dipakai untuk tentukan elemen yang mana harus dirender saat pemakai berkunjung URL tertentu. Misalkan, saat pemakai berkunjung URL root, React dapat diinstruksikan untuk merender komponen halaman beranda
React, track umumnya ditetapkan memakai library React Router yang mempunyai beberapa elemen pokok. Komponen utama yang dipakai untuk perutean ialah elemen yang tentukan track di URL dan elemen yang hendak dirender.
Contohnya, untuk merender komponen halaman di URL root, kode berikut bisa dipakai:
<Route exact path="/" component={ HomePage } />Komponen inti lain yang disediakan oleh React Router meliputi:
- <link> yang memungkinkan pengguna untuk menavigasi ke halaman yang berbeda
- <switch> yang memungkinkan pengguna untuk beralih di antara beberapa komponen <route>
- <redirect> yang memungkinkan pengguna untuk mengarahkan pengguna ke halaman lain
Dengan menggunakan komponen-komponen ini, development dapat membuat struktur perutean yang kompleks dalam aplikasi React mereka. Selain itu, development dapat menggunakan React Router untuk melewatkan props antar komponen, menangani string kueri, dan membuat rute dinamis.
Sekarang, dengan BrowserRouter yang akan kita sebut "Router", kita bisa mengatur tempat untuk meletakkan halaman kita.
Contoh:
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
// Pages
import Home from "./pages/Home";
import About from "./pages/About";
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={ Home } />
<Route exact path="/about" component={ About } />
</Switch>
</Router>
);
}
export default App;Dalam contoh ini, kami sudah mengimpor komponen BrowserRouter dan track dari library React Router. Kami sudah memutuskan dua halaman, terrace dan Mengenai. Kami selanjutnya package dua komponen track kami dalam komponen Switch yang pastikan cuman satu komponen yang dirender pada satu waktu. Paling akhir, kita sudah tentukan track untuk tiap komponen dan komponen yang hendak dirender untuk tiap track.
Saat pemakai berkunjung URL akar, komponen terrace akan dirender. Saat pemakai berkunjung track /about, komponen About akan dirender.
track di React adalah alat yang baik untuk membuat program satu halaman dengan kekuatan untuk bernavigasi antara banyak halaman tak perlu berisi ulangi halaman. React Router sediakan semua elemen yang dibutuhkan untuk membikin susunan perutean yang sulit dan tangani string kueri, alat peraga, dan track aktif.
Tetapi apa yang sudah dilakukan switch?
switch adalah komponen React Router yang memungkinkannya pemakai berpindah antara beberapa komponen track. Ini dipakai untuk pastikan jika cuman satu komponen yang dirender pada satu waktu. Pada contoh di atas, komponen Switch pastikan jika cuma komponen terrace atau Mengenai yang dirender tergantung pada URL yang didatangi pengguna.
switch adalah langkah yang baik untuk memastikan program Anda tidak tampilkan beberapa komponen secara bersamaan, yang bisa membingungkan dan menyebabkan sikap yang tidak diharapkan.
Jika Anda kesusahan pahaminya, pikir semacam ini. Silahkan kita ambil website Amazon misalkan, yang banyak memiliki halaman dan banyak produk. Jika Anda tidak mempunyai switch, Anda akan coba tampilkan semua halaman dan produk ini secara bertepatan. Itu akan memusingkan dan tidak logis.
Tetapi, dengan switch, Anda bisa atur track yang lain untuk tiap halaman dan produk, dan cuman satu yang akan ditampilkan dalam satu waktu. Ini menolong Anda atur program Anda dan pastikan jika komponen yang pas ditampilkan di saat yang akurat.
Bagaimana bila Anda menempatkan suatu hal di luar switch?
Tiap komponen atau perutean yang ditentukan di luar komponen Switch akan dirender. Ini bermanfaat untuk komponen atau perutean yang dibutuhkan di semua halaman seperti bilah navigasi atau footer. Ucapkanlah Anda mempunyai komponen navbar, NavBar dan komponen footer, Footer yang perlu dirender di semua halaman. Anda bisa tentukan elemen ini di luar komponen Switch semacam ini:
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
// Pages
import Home from "./pages/Home";
import About from "./pages/About";
// Components
import NavBar from "./components/NavBar";
import Footer from "./components/Footer";
function App() {
return (
<Router>
<NavBar />
<Switch>
<Route exact path="/" component={ Home } />
<Route exact path="/about" component={ About } />
</Switch>
<Footer />
</Router>
);
}
export default App;Dalam contoh ini, komponen NavBar dan Footer akan ditampilkan di semua halaman, terlepas dari apa yang dikunjungi pengguna. Komponen Switch masih akan mengontrol halaman mana yang di-render, tetapi NavBar dan Footer akan selalu ada.
Rute di React adalah alat yang ampuh untuk membuat aplikasi satu halaman dengan kemampuan untuk menavigasi di antara beberapa halaman tanpa harus memuat ulang halaman. React Router menyediakan semua komponen yang diperlukan untuk membuat struktur perutean yang rumit dan menangani string kueri, props, dan rute dinamis. Dengan memahami bagaimana rute dan komponen Switch bekerja, Anda dapat membuat aplikasi yang kuat dan ramah pengguna menggunakan React.