Tải dữ liệu trang theo tham số URL từ kho lưu trữ trong React Router

Bây giờ chúng ta có thể thêm sản phẩm vào ứng dụng của mình. Hãy khởi chạy ứng dụng, thêm vài sản phẩm bằng nút. Nếu bây giờ chúng ta nhấp vào chính các sản phẩm trong danh sách, thì sẽ thấy rằng mỗi sản phẩm vẫn còn có một trang tĩnh giống nhau, và chúng ta sẽ làm việc với nó trong bài học này và các bài học tiếp theo.

Cũng cần lưu ý một điểm nữa. Nói chung, toàn bộ URL được chia thành các phân đoạn - đây là những phần của URL nằm giữa các ký tự /. Có lẽ bạn còn nhớ rằng khi tạo ứng dụng này, chúng ta đã chỉ định đường dẫn 'products/:productId', vậy thì :productId ở đây được gọi là phân đoạn động. Trước nó đặt ký tự ':'. Các giá trị trong phân đoạn này sẽ thay đổi, chính chúng sẽ đi vào các tham số URL (URL Params hoặc params), được truyền cho trình tải dữ liệu dưới một khóa nhất định, trong trường hợp của chúng ta đó sẽ là params.productId.

Hãy nhìn vào thanh địa chỉ trong trình duyệt, khi bạn nhấp vào các sản phẩm trong danh sách. Bạn sẽ thấy, rằng phân đoạn cuối cùng trong thanh địa chỉ thay đổi, chính những giá trị này sẽ đi vào trình tải dữ liệu. Và các sản phẩm của chúng ta trong kho lưu trữ có một id duy nhất do chúng ta tạo ra, do đó sản phẩm mà chúng ta cần sẽ được tải lên.

Và bây giờ sau một chút lạc đề, chúng ta hãy cuối cùng làm việc với trang sản phẩm, cụ thể là - với việc tải dữ liệu từ kho lưu trữ.

Hãy lặp lại quy trình quen thuộc. Đầu tiên, trong forStorage.js, hãy thêm hàm getProduct để lấy dữ liệu của một sản phẩm cụ thể từ kho lưu trữ theo id. Ở đây chúng ta sẽ truyền vào hàm id và, tương ứng, nếu sản phẩm của chúng ta được "lưu trong bộ nhớ đệm", thì sẽ được hiển thị ngay lập tức mà không có độ trễ:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
}

Tiếp theo, chúng ta cần lấy mảng sản phẩm và trong số đó tìm sản phẩm của chúng ta theo id đã truyền:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	return product ?? null;
}

Hãy lấy ứng dụng được tạo bởi bạn 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 tạo trong forStorage.js hàm getStudent để lấy dữ liệu sinh viên theo id.