Masalah utama yang berkaitan dengan React Router v6 suspense malas ialah ia belum disokong sepenuhnya oleh semua pelayar. Ini bermakna pengguna mungkin mengalami masalah apabila cuba mengakses halaman atau ciri tertentu di tapak web menggunakan React Router v6 suspense malas. Selain itu, masih terdapat beberapa pepijat dan isu prestasi yang perlu ditangani sebelum ia boleh digunakan dalam persekitaran pengeluaran. Akhir sekali, API untuk komponen memuatkan malas dengan Suspense masih dalam peringkat awal dan mungkin memerlukan masa pembangunan tambahan untuk memastikan keserasian dengan aplikasi sedia ada.
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
function AppRouter() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router>
);
}
export default AppRouter;
1. Kod ini mengimport pustaka React, serta komponen Suspense daripada React dan komponen BrowserRouter, Route dan Switch daripada react-router-dom.
2. Ia kemudian mentakrifkan tiga komponen (Home, About, Contact) menggunakan ciri pemuatan malas React untuk mengimportnya daripada fail masing-masing.
3. Fungsi AppRouter ditakrifkan yang mengembalikan komponen Penghala yang mengandungi komponen Suspense dengan komponen Suis di dalamnya.
4. Di dalam komponen Suis terdapat tiga komponen Laluan yang masing-masing memaparkan satu daripada komponen yang diimport apabila laluan masing-masing dipadankan dalam URL (cth, '/' untuk Laman Utama).
5. Akhir sekali, AppRouter dieksport supaya ia boleh digunakan di tempat lain dalam aplikasi.
Bagaimanakah anda menggunakan pemuatan malas dalam penghala reaksi v6
v6
Lazy loading adalah teknik yang digunakan untuk menangguhkan pemuatan komponen tertentu sehingga ia diperlukan. Dalam React Router v6, pemuatan malas boleh dicapai dengan menggunakan sintaks import() dinamik. Sintaks ini membolehkan anda membahagikan kod anda kepada beberapa berkas yang kemudiannya boleh dimuatkan atas permintaan atau selari. Ini membantu mengurangkan saiz berkas awal dan meningkatkan prestasi. Untuk menggunakan lazy loading dengan React Router v6, anda mesti membungkus komponen yang anda mahu malas memuatkan dalam panggilan import() dinamik. Panggilan import() akan mengembalikan janji yang akan diselesaikan apabila komponen telah dimuatkan dan sedia untuk diberikan.
Apa yang suspen dan malas bertindak balas
Suspense dalam React Router ialah cara untuk menangguhkan pemuatan laluan sehingga beberapa syarat dipenuhi. Ini boleh digunakan untuk meningkatkan prestasi aplikasi dengan hanya memuatkan laluan apabila ia diperlukan. Sebagai contoh, jika pengguna menavigasi ke halaman yang memerlukan pengesahan, laluan itu boleh ditangguhkan sehingga pengesahan telah selesai.
Pemuatan malas dalam Penghala Reaksi membolehkan komponen dimuatkan secara tidak segerak apabila ia diperlukan dan bukannya dimuatkan sekaligus. Ini meningkatkan prestasi dengan hanya memuatkan komponen apabila ia diperlukan dan mengurangkan jumlah data yang perlu dipindahkan melalui rangkaian. Pemuatan malas juga membantu dengan pemisahan kod, membolehkan aplikasi yang lebih besar dipecahkan kepada bahagian yang lebih kecil yang boleh dimuatkan atas permintaan.
