Sahifa ma'lumotlarini URL parametrlari orqali React Router'da saqlovchidan yuklash

Endi biz mahsulotlarni ilovamizga qo'shishimiz mumkin. Ilovani ishga tushiring, tugma yordamida bir nechta mahsulot qo'shing. Agar biz endi ro'yxatdagi mahsulotlarning o'zlarini bossek, ko'ramizki, hali har bir mahsulotda bir xil statik sahifa ko'rsatiladi, biz shu sahifa bilan shu va keyingi darslarda shug'ullanamiz.

Shuningdek, yana bir nuqtani ta'kidlash kerak. Umuman olganda, butun URL segmentlarga bo'linadi - bu / belgilari orasidagi URL qismlari. Siz ehtimol eslaysizki, ushbu ilovani yaratishda biz yo'lni ko'rsatdik 'products/:productId', demak :productId bu yerda dinamik segment deb ataladi. Unga oldindan ':' belgisi qo'yiladi. Ushbu segmentdagi qiymatlar o'zgaradi, aynan ular URL parametrlariga (URL Params yoki params) kiradi, ular ma'lum bir kalit ostida yuklovchiga uzatiladi, bizning holatda bu params.productId bo'ladi.

Brauzerdagi manzillar satriga qarang, ro'yxatdagi mahsulotlarni bosganingizda. Ko'rasizki, manzillar satridagi oxirgi segment o'zgaradi, aynan shu qiymatlar yuklovchiga kiradi. Saqlovchidagi mahsulotlarimizda o'zimiz yaratgan noyob id mavjud, shu tarzda bizga kerak bo'lgan mahsulot yuklanadi.

Endi kichik tanaffusdan so'ng keling mahsulot sahifasi bilan ishlaymiz, aniqrog'i - saqlovchidan ma'lumotlarni yuklash bilan.

Tanish jarayonni takrorlaymiz. Birinchi navbatda forStorage.js fayliga getProduct funksiyasini qo'shamiz id bo'yicha saqlovchidan ma'lum mahsulot ma'lumotlarini olish uchun. Bu yerda biz funksiyaga id ni uzatamiz va, mos ravishda, agar mahsulot "keshlangan" bo'lsa, kechikishsiz chiqadi:

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

Keyinchalik biz mahsulotlar ro'yxatini olishimiz va ular orasidan berilgan id bo'yicha mahsulotimizni topishimiz kerak:

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

Oldingi darslar uchun topshiriqlarda yaratgan ilovangizni oling. Dars materiallaridan foydalanib, forStorage.js faylida getStudent funksiyasini yarating id bo'yicha talaba ma'lumotlarini olish uchun.