Pemuatan Data untuk Laluan dalam React Router

Dalam pelajaran lepas, kami telah mengekstrak data produk dari storan. Sekarang data ini perlu dimuatkan ke dalam elemen laluan. Untuk ini, fungsi pemuat (loader) digunakan. Sekarang kami akan menciptanya.

Buka root.jsx, tambahkan baris import getProducts dari forStorage.js di sini:

import { getProducts } from '../forStorage'

Segera selepas baris import dan sebelum fungsi Root, tulis kod fungsi loader, yang melalui getProducts akan mengembalikan data produk dari storan kepada kami. Secara umumnya fungsi sedemikian perlu ditulis dalam fail berasingan, tetapi kami agak malas, jadi jangan pedulikan amaran:

export async function loader() {
	const products = await getProducts();
	return { products };
}

Sekarang mari tambahkan import pemuat kami ke dalam main.jsx. Pemuat ini akan untuk akar, jadi kami akan namakannya rootLoader:

import Root, { loader as rootLoader } from './routes/root';

Dan tambahkannya ke objek laluan kami dalam sifat loader:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		loader: rootLoader,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},
]);

Ambil aplikasi yang dicipta oleh anda dalam tugasan untuk pelajaran lepas. Dengan menggunakan bahan pelajaran, tulis dalam fail root.jsx fungsi loader untuk memuatkan data pelajar dan tambahkan ia ke dalam objek laluan dalam main.jsx.