Pemuatan Data untuk Rute di React Router

Pada pelajaran sebelumnya, kita mengekstrak data produk dari penyimpanan. Sekarang data ini perlu dimuat ke dalam elemen rute. Untuk ini digunakan fungsi pemuat (loader). Sekarang kita akan membuatnya.

Buka root.jsx, tambahkan baris impor getProducts dari forStorage.js:

import { getProducts } from '../forStorage'

Langsung setelah baris impor dan sebelum fungsi Root tulis kode fungsi loader, yang melalui getProducts akan mengembalikan data produk dari penyimpanan. Secara umum fungsi seperti ini harus ditulis dalam file terpisah, tapi kita sedikit malas, jadi jangan perhatikan peringatan:

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

Sekarang mari tambahkan impor pemuat kita ke main.jsx. Pemuat ini akan untuk root, jadi kita akan menyebutnya rootLoader:

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

Dan tambahkan ke objek rute kita dalam properti loader:

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

Ambil aplikasi yang Anda buat di tugas pelajaran sebelumnya. Dengan menggunakan materi pelajaran, tulis di file root.jsx fungsi loader untuk memuat data siswa dan tambahkan ke objek rute di main.jsx.