[ad_1]
Pada artikel ini, kita akan membahas cara membuat situs web (atau aplikasi) multi halaman di React. Ini adalah konsep yang relatif sederhana, dan dapat dilakukan dalam waktu sekitar lima menit. Setelah Anda memahami cara melakukannya, Anda akan dapat terus menambahkan halaman ke proyek Anda dengan mudah.
Kami akan menggunakan React Router V6, yang baru saja dirilis, dan berisi beberapa perubahan yang melanggar dari versi lima. Tutorial lain yang menggunakan V5 tidak akan berfungsi dan sudah usang.
Memiliki aplikasi atau situs web dengan banyak halaman yang dikodekan dalam React penting untuk pengalaman pengguna. Lihatlah aplikasi reaksi populer seperti Twitter Lite atau Facebook… Anda akan melihat bahwa ada banyak koleksi halaman yang diakses pengguna setiap hari.
Ada kumpulan metode yang dapat Anda terapkan untuk menambahkan beberapa halaman di React, tetapi Anda harus terlebih dahulu memahami bahwa ini bukan sesuatu yang dibangun ke dalam pustaka asli. Sebagai gantinya, kita perlu menggunakan paket yang dibuat khusus untuk memenuhi tujuan membuat banyak halaman.
Kasus penggunaan untuk memiliki banyak halaman dalam satu aplikasi React cukup sederhana. Anda dapat membuat situs web, dan dengan mudah mengklasifikasikan berbagai jenis konten pada halaman yang berbeda.
Namun, perlu juga dipahami bahwa implementasi default dari React dibuat untuk menggunakan satu file HTML, dan ini adalah desain. Komponen pengguna React, yang ditambahkan secara dinamis ke file HTML tunggal ini.
Banyak Halaman di Bereaksi
Seperti yang disebutkan sebelumnya, ada banyak cara berbeda untuk menambahkan banyak halaman di React. Mari kita lihat beberapa paket yang dapat Anda instal untuk memenuhi tugas ini.
Sekarang setelah kita memahami berbagai cara kita dapat mengimplementasikan halaman di React, mari kita lihat cara paling populer dan sederhana untuk melakukan ini.
Menggunakan Bereaksi Router
React Router adalah pustaka standar de facto untuk perutean dengan reaksi. Setelah diatur, Anda akan dapat menavigasi di antara beberapa komponen dalam reaksi, disinkronkan dengan mengubah jalur URL. Ini juga akan bekerja dengan API riwayat HTML5, menjaga semuanya tetap sinkron dan memungkinkan Anda untuk menggunakan panah maju/mundur di browser.
Untuk tutorial ini kita akan berasumsi bahwa Anda telah membuat aplikasi React dan memiliki beberapa komponen yang ingin Anda navigasikan.
React Router bagus untuk menghapus flash putih yang terjadi saat menavigasi antar file, dan membuat segalanya berubah dengan cepat, sambil memungkinkan pengguna untuk tetap maju dan mundur menggunakan API Sejarah.
Catatan, ini adalah contoh sederhana. Ini juga masih rendering sisi klien, yang tidak baik untuk SEO. Jika Anda mencoba membuat situs web “nyata”, lihat BerikutnyaJS atau Gatsby.
1. Tambahkan React Router
npm install react-router-dom
Ini akan menginstal react-router-dom paket ke aplikasi Anda yang diperlukan untuk menerapkan perutean dinamis untuk masing-masing halaman, menyinkronkan URL, dan mengakses API riwayat.
2. Bangun Halaman Anda
Kami akan membuat kumpulan halaman, di /src/pages direktori. Dalam contoh ini, kami memiliki Beranda, halaman 404, blog, dan halaman kontak untuk dinavigasi.
Dalam contoh ini, halaman beranda, kontak, dan blog mengikuti struktur umum yang sama:
impor Bereaksi dari ‘bereaksi’; function Home() { return (
ini adalah beranda
); } ekspor Beranda default;
NoPage juga sama, tetapi dirancang sebagai halaman kesalahan 404.
Kami akan kembali ke “layout.jsx” di langkah 4.
Sekarang setelah kita memahami struktur halaman, mari buat navbar untuk melompat di antara masing-masing halaman. Kami menyarankan untuk membuat komponen navbar individual karena mudah diedit di masa mendatang. Beberapa tutorial lain menggabungkan Nav ke dalam file layout.jsx, yang juga bagus.
Berikut tampilan navbar.jsx:
impor Bereaksi dari “bereaksi”; import { BrowserRouter, Route, Link } dari “react-router-dom”; function Navbar() { return (
); } ekspor Navbar default;
Itu <link/> elemen sama dengan <a href=> dalam HTML.
4. Satukan Semuanya Dengan Layout.jsx
Sekarang, kita akan mengikat konten halaman (menganggapnya sebagai yang utama) dan navigasi antara setiap halaman menjadi satu.
Berikut tampilan file tersebut:
impor Bereaksi dari “bereaksi”; impor {Outlet} dari “react-router-dom”; impor Navbar dari “../Navbar”; const Tata Letak = () => { return ( <>
Itu <Outlet/> elemen mengeluarkan komponen yang dirutekan ke langkah 5.
5. Buat Rute
Di index.js kami, kami akan membuat perutean yang sebenarnya.
impor ReactDOM dari “react-dom”; import { BrowserRouter, Routes, Route } dari “react-router-dom”; impor Tata Letak dari “./pages/Layout”; impor Beranda dari “./halaman/Beranda”; impor Blog dari “./pages/Blogs”; impor Kontak dari “./pages/Contact”; impor NoPage dari “./pages/NoPage”; ekspor fungsi default App() { return (
Ini adalah cara sebenarnya kami merutekan antara setiap komponen, atau halaman. Strukturnya penting di sini: secara default, kami akan merender template Layout, yang pada gilirannya menampilkan halaman-halaman di dalamnya. <Route index element={<Home />} />Dengan menyetel rute indeks, domain telanjang akan memuat template Beranda.
Rute-rute ini akan menampilkan halaman blog ketika urlnya adalah /blog dan halaman kontak ketika urlnya adalah /contact. Tambahkan halaman dan rute sebanyak yang diperlukan.
Rute terakhir ini adalah catchall, jika tidak ada halaman lain. Ini bagus untuk 404.
Kesimpulan
Kami berharap tutorial ini bermanfaat dan menunjukkan kepada Anda cara mudah mengimplementasikan halaman di React. Tutorial ini menggunakan React Route v6, yang baru saja dirilis – ketahuilah bahwa banyak tutorial lain akan menggunakan elemen usang dan tidak didukung seperti switch. Ingat, ini tidak akan ramah untuk mesin telusur, tetapi jika Anda mencari cara bagi pengguna Anda untuk mengakses API riwayat, menavigasi antar laman dan melihat perubahan URL, dan umumnya memiliki lebih banyak fitur seperti situs web untuk aplikasi Anda, ini adalah rute yang bagus untuk Anda.
[ad_2]
Source link
Content Writer
