URL প্যারামিটার থেকে স্টোরেজে ডেটা লোড করা React Router-এ

এখন আমরা আমাদের অ্যাপ্লিকেশনে পণ্য যোগ করতে পারি। অ্যাপ্লিকেশন চালু করুন, বাটন দিয়ে কয়েকটি পণ্য যোগ করুন। যদি আমরা এখন তালিকায় পণ্যগুলোতে ক্লিক করি, তাহলে দেখব যে প্রতিটি পণ্যের এখনও একই স্ট্যাটিক পৃষ্ঠা রয়েছে, এই পাঠ এবং পরবর্তী পাঠে আমরা সেটি নিয়ে কাজ করব।

আরও একটি বিষয় উল্লেখ করা প্রয়োজন। মূলত, সম্পূর্ণ URL সেগমেন্ট-এ বিভক্ত - এগুলি হল / চিহ্নের মধ্যে URL-এর অংশ। আপনি সম্ভবত মনে রাখেন যে এই অ্যাপ্লিকেশন তৈরি করার সময় আমরা 'products/:productId' পথ নির্দিষ্ট করেছিলাম, তাহলে এখানে :productId-কে ডাইনামিক সেগমেন্ট বলা হয়। এর আগে ':' চিহ্ন বসে। এই সেগমেন্টের মানগুলি পরিবর্তিত হবে, সেগুলিই URL প্যারামিটারে (URL Params বা params) যায়, যা একটি নির্দিষ্ট কী সহ লোডারে প্রেরণ করা হয়, আমাদের ক্ষেত্রে এটি হবে params.productId।

ব্রাউজারের অ্যাড্রেস বারে তাকান যখন আপনি তালিকায় পণ্যগুলিতে ক্লিক করেন। আপনি দেখবেন যে অ্যাড্রেস বারের শেষ সেগমেন্টটি পরিবর্তিত হয়, এই মানগুলি লোডারে প্রবেশ করবে। এবং আমাদের স্টোরের পণ্যগুলির একটি অনন্য id রয়েছে যা আমরা তৈরি করেছি, এইভাবে আমাদের প্রয়োজনীয় পণ্যটি লোড হবে।

এবং এখন একটি ছোট ব্যাখার পরে আসুন finalmente পণ্য পৃষ্ঠা নিয়ে কাজ করি, আরও নির্দিষ্টভাবে - স্টোরেজ থেকে ডেটা লোড করার সাথে।

আসুন একটি পরিচিত প্রক্রিয়া পুনরাবৃত্তি করি। শুরুতে, forStorage.js-এ id দ্বারা স্টোরেজ থেকে একটি নির্দিষ্ট পণ্যের ডেটা পেতে getProduct ফাংশন যোগ করুন। এখানে আমরা ইতিমধ্যেই ফাংশনে id পাস করব এবং সেই অনুযায়ী, যদি পণ্যটি "ক্যাশে" করা থাকে, তবে এটি বিলম্ব ছাড়াই প্রদর্শিত হবে:

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

এরপর আমাদের পণ্যগুলির একটি অ্যারে পেতে হবে এবং সেগুলির মধ্যে প্রেরিত id দ্বারা আমাদের পণ্যটি খুঁজে বের করতে হবে:

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

আপনি পূর্ববর্তী পাঠের অ্যাসাইনমেন্টে তৈরি করা অ্যাপ্লিকেশনটি নিন। পাঠের উপকরণ ব্যবহার করে, forStorage.js-এ id দ্বারা শিক্ষার্থীর ডেটা পেতে getStudent ফাংশন তৈরি করুন।