Sử dụng dữ liệu nhận được từ loader trong React Router

Ở bài học trước, chúng ta đã lấy dữ liệu từ kho lưu trữ bằng cách sử dụng loader. Để sử dụng dữ liệu này, chúng ta dùng hook useLoaderData. Hãy mở tệp root.jsx và thêm hook vào phần import:

import { Outlet, Link, useLoaderData } from 'react-router-dom';

Trong hàm Root, giờ đây chúng ta sẽ nhận dữ liệu vào hằng số products và làm việc với nó. Nếu chúng ta có một số sản phẩm, danh sách sẽ được hiển thị, nếu không, chúng ta sẽ xuất ra đoạn văn 'no products here ...'. Trong thẻ nav, giờ đây chúng ta sử dụng vòng lặp tiêu chuẩn để xuất các sản phẩm đã nhận. Mỗi phần tử sẽ được bọc trong component Link và địa chỉ sẽ là của riêng mỗi phần tử (chúng ta sẽ nói về điều này sau). Theo đó, nếu sản phẩm không có tên, thì mặc định sẽ xuất ra 'Unnamed'. Vậy, với những điều đã nói ở trên, giờ đây mã của chúng ta cho hàm Root sẽ như thế này:

function Root() {

	const { products } = useLoaderData();
	return (
		<div id="main">
			{products.length ? (
				<nav>
					{products.map((product) => (
						<Link key={product.id} to={`products/${product.id}`}>
							{product.name ? product.name : <i>Unnamed</i>}
						</Link>
					))}
				</nav>
			) : (
				<p><i>no products here ...</i></p>
			)}
			<div id="product">
				<Outlet />
			</div>
		</div>
	);
}

Nếu bây giờ chúng ta khởi động lại ứng dụng và vào trang chủ, chúng ta sẽ chỉ thấy dòng chữ 'no products here ...', vì chúng ta chưa thêm bất kỳ sản phẩm nào vào kho lưu trữ.

Hãy lấy ứng dụng mà bạn đã tạo trong các bài tập 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 thêm việc hiển thị dữ liệu về sinh viên nhận được từ loader, như được mô tả trong bài học.