Lấy Dữ Liệu Loader theo Tham số URL trong React Router

Ở bài học trước, chúng ta đã viết hàm để lấy dữ liệu trang sản phẩm, hãy import getProduct trong file product.jsx:

import { getProduct } from '../forStorage';

Hãy viết hàm loader loader ngay sau import và trước hàm Product. Truyền vào nó các tham số URL:

export async function loader({ params }) {
	const product = await getProduct(params.productId);
	return { product };
}

Đồng thời, import hook useLoaderData để sử dụng dữ liệu được lấy bởi loader:

import { useLoaderData } from 'react-router-dom';

Áp dụng useLoaderData, tương ứng thay thế dòng tạo object product ở đầu hàm Product bằng dòng sau:

const { product } = useLoaderData();

Và tất nhiên, chúng ta cần thay đổi một chút phần giao diện của mình, vì đã bỏ object product cũ. Hãy thay thế nội dung các đoạn văn:

<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

Thành phần sau:

<p>Name: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Amount: {product.amount ? product.amount : <i>unknown</i>}</p>

Chúng ta còn phải mở main.jsx và thêm import loader vào đó, hãy đặt tên nó là productLoader:

import Product, {
	loader as productLoader,
} from './routes/product';

Và khai báo nó làm loader cho object route của trang sản phẩm, thêm nó vào children sau thuộc tính element:

children: [
	{
		path: 'products/:productId',
		element: <Product />,
		loader: productLoader,
	},
],

Thế là xong, chúng ta đã hoàn tất việc tải dữ liệu cho trang sản phẩm! Tuy nhiên, hiện tại chưa có gì để tải. Hãy chạy ứng dụng, thêm một số sản phẩm và nhấp vào chúng trong danh sách để đảm bảo mọi thứ hoạt động.

Hãy lấy ứng dụng 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 bài học, hãy triển khai loader, kết nối nó, sử dụng dữ liệu từ nó cho trang sinh viên.