Memuat Data Halaman Menggunakan Parameter URL dari Penyimpanan dalam React Router

Sekarang kita boleh menambah produk dalam aplikasi kita. Jalankan aplikasi, tambah beberapa produk dengan butang. Jika kita kini klik pada produk itu sendiri dalam senarai, kita akan lihat bahawa setiap produk masih mempunyai halaman statik yang sama, yang akan kita tangani dalam pelajaran ini dan seterusnya.

Juga perlu dinyatakan satu perkara lagi. Secara umum, keseluruhan URL dibahagikan kepada segmen - ini ialah bahagian URL antara aksara /. Anda mungkin masih ingat bahawa ketika mencipta aplikasi ini, kami menentukan laluan 'products/:productId', jadi :productId di sini dipanggil segmen dinamik. Di hadapannya diletakkan aksara ':'. Nilai dalam segmen ini akan berubah, tepatnya mereka masuk ke dalam parameter URL (URL Params atau params), yang dihantar kepada pemuat dengan kunci tertentu, dalam kes kami ini akan menjadi params.productId.

Lihat bar alamat dalam pelayar, apabila anda klik pada produk dalam senarai. Anda akan lihat, bahawa segmen terakhir dalam bar alamat berubah, tepatnya nilai-nilai ini akan masuk ke dalam pemuat. Dan produk kami dalam penyimpanan mempunyai id unik yang dijana oleh kami, justeru kami akan memuatkan produk yang kami perlukan.

Dan sekarang setelah penyimpangan kecil, mari akhirnya berurusan dengan halaman produk, atau lebih khusus - dengan memuat data dari penyimpanan.

Mari ulangi proses yang sudah biasa. Pertama, dalam forStorage.js tambah fungsi getProduct untuk mendapatkan data produk tertentu dari penyimpanan mengikut id. Di sini kami akan menyampaikan kepada fungsi id dan, dengan itu, jika produk kami "disimpan dalam cache", maka ia akan dipaparkan tanpa kelewatan:

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

Seterusnya, kami perlu mendapatkan tatasusunan produk dan antara mereka mencari produk kami mengikut id yang dihantar:

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;
}

Ambil aplikasi yang dicipta oleh anda dalam tugasan untuk pelajaran lepas. Menggunakan bahan pelajaran, buat dalam forStorage.js fungsi getStudent untuk mendapatkan data pelajar mengikut id.