Bộ nạp dữ liệu cho route trong React Router

Ở bài học trước, chúng ta đã trích xuất dữ liệu sản phẩm từ kho lưu trữ. Bây giờ những dữ liệu này cần được nạp vào phần tử route. Để làm điều này, người ta sử dụng hàm bộ nạp (loader). Bây giờ chúng ta sẽ tạo nó.

Hãy mở root.jsx, thêm vào đây dòng nhập getProducts từ forStorage.js:

import { getProducts } from '../forStorage'

Ngay sau các dòng import và trước hàm Root, chúng ta hãy viết mã cho hàm loader, hàm này thông qua getProducts sẽ trả về cho chúng ta dữ liệu sản phẩm từ kho lưu trữ. Nói chung, những hàm như vậy cần được viết trong một tệp riêng biệt, nhưng chúng ta hơi lười một chút, vì vậy đừng chú ý đến cảnh báo:

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

Bây giờ hãy thêm việc nhập bộ nạp của chúng ta vào main.jsx. Bộ nạp này sẽ dành cho gốc, vì vậy chúng ta hãy đặt tên nó là rootLoader:

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

Và thêm nó vào đối tượng route của chúng ta trong thuộc tính loader:

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

Hãy lấy ứng dụng được tạo bởi bạn trong các nhiệm vụ của các bài học trước. Sử dụng tài liệu của bài học, hãy viết trong tệp root.jsx hàm loader để nạp dữ liệu sinh viên và thêm nó vào đối tượng route trong main.jsx.