Memuat Data Halaman Berdasarkan Parameter URL dari Penyimpanan di React Router

Sekarang kita bisa menambahkan produk ke dalam aplikasi kita. Jalankan aplikasinya, tambahkan beberapa produk dengan tombol. Jika sekarang kita mengklik produk itu sendiri dalam daftar, maka akan terlihat bahwa setiap produk masih memiliki halaman statis yang sama, inilah yang akan kita kerjakan dalam pelajaran ini dan selanjutnya.

Perlu juga dicatat satu hal lagi. Secara umum, seluruh URL dibagi menjadi segmen - yaitu bagian-bagian URL di antara karakter /. Anda mungkin ingat bahwa saat membuat aplikasi ini kita menentukan path 'products/:productId', nah :productId di sini disebut segmen dinamis. Di depannya diberikan simbol ':'. Nilai-nilai dalam segmen ini akan berubah, dan nilainya akan masuk ke parameter URL (URL Params atau params), yang diteruskan ke loader dengan kunci tertentu, dalam kasus kita ini adalah params.productId.

Lihatlah address bar di browser, saat Anda mengklik produk dalam daftar. Anda akan melihat, bahwa segmen terakhir di address bar berubah, nilai-nilai inilah yang akan masuk ke loader. Dan produk-produk kita di penyimpanan memiliki id unik yang kita hasilkan, dengan demikian produk yang akan dimuat adalah produk yang kita butuhkan.

Dan sekarang setelah penyimpangan singkat, mari akhirnya kita kerjakan halaman produk, tepatnya - dengan memuat data dari penyimpanan.

Mari ulangi proses yang sudah familiar. Pertama, di forStorage.js tambahkan fungsi getProduct untuk mendapatkan data produk tertentu dari penyimpanan berdasarkan id. Di sini kita akan meneruskan id ke fungsi dan, sesuai, jika produk kita "di-cache", maka akan ditampilkan tanpa penundaan:

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

Selanjutnya kita perlu mendapatkan array produk dan di antara mereka temukan produk kita berdasarkan id yang diteruskan:

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 Anda buat dalam tugas untuk pelajaran sebelumnya. Dengan menggunakan materi pelajaran, buatlah di forStorage.js fungsi getStudent untuk mendapatkan data siswa berdasarkan id.