React Router में URL पैरामीटर्स से स्टोरेज में डेटा लोड करना

अब हम अपने एप्लिकेशन में उत्पाद जोड़ सकते हैं। एप्लिकेशन चलाएं, बटन से कुछ उत्पाद जोड़ें। अगर हम अब सूची में उत्पादों पर क्लिक करते हैं, तो हम देखेंगे कि प्रत्येक उत्पाद में अभी भी एक ही स्थिर पेज है, जिस पर हम इस और आने वाले पाठों में काम करेंगे।

एक और बिंदु पर ध्यान देना जरूरी है। सामान्य तौर पर, पूरा URL सेगमेंट में विभाजित होता है - ये / वर्णों के बीच URL के भाग हैं। आपको शायद याद होगा कि इस एप्लिकेशन को बनाते समय हमने पथ 'products/:productId' निर्दिष्ट किया था, तो :productId को यहाँ डायनामिक सेगमेंट कहा जाता है। इससे पहले ':' वर्ण लगाया जाता है। इस सेगमेंट के मान बदलते रहेंगे, ये वही हैं जो URL पैरामीटर्स (URL Params या params) में आते हैं, जो एक विशिष्ट कुंजी के तहत लोडर को पास होते हैं, हमारे मामले में यह params.productId होगा।

ब्राउज़र में एड्रेस बार पर तब नज़र डालें, जब आप सूची में उत्पादों पर क्लिक करते हैं। आप देखेंगे कि एड्रेस बार में अंतिम सेगमेंट बदलता रहता है, ये वही मान हैं जो लोडर में जाएंगे। और हमारे स्टोरेज में उत्पादों के पास एक अद्वितीय हमारे द्वारा जनरेट किया गया id है, इस प्रकार हमें वह उत्पाद लोड होगा जिसकी हमें आवश्यकता है।

और अब थोड़े से विषयांतर के बाद आइए अंततः उत्पाद पेज के साथ काम करें, और विशेष रूप से - स्टोरेज से डेटा लोड करने के साथ।

परिचित प्रक्रिया को दोहराते हैं। सबसे पहले 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 फ़ंक्शन बनाएं।