रिएक्ट राउटर में लोडर द्वारा प्राप्त डेटा का उपयोग

पिछले पाठ में हमने loader का उपयोग करके स्टोर से डेटा प्राप्त किया था। इस डेटा का उपयोग करने के लिए, हम useLoaderData हुक का उपयोग करेंगे। root.jsx फ़ाइल खोलें और आयात में हुक जोड़ें:

import { Outlet, Link, useLoaderData } from 'react-router-dom';

Root फ़ंक्शन में अब हम products स्थिरांक में डेटा प्राप्त करेंगे और उसके साथ काम करेंगे। यदि हमारे पास कोई उत्पाद हैं, तो सूची दिखाई देगी, यदि नहीं, तो हम 'no products here ...' पैराग्राफ में दिखाएंगे। nav टैग में अब हम प्राप्त उत्पादों को दिखाने के लिए मानक लूप का उपयोग करते हैं। प्रत्येक तत्व Link घटक में लपेटा जाएगा और प्रत्येक का अपना पता होगा (हम इसके बारे में बाद में बात करेंगे)। तदनुसार, यदि किसी उत्पाद का नाम नहीं है, तो डिफ़ॉल्ट रूप से 'Unnamed' दिखाई देगा। तो, ऊपर कहे गए को ध्यान में रखते हुए, अब Root फ़ंक्शन के लिए हमारा कोड इस प्रकार होगा:

function Root() {

	const { products } = useLoaderData();
	return (
		<div id="main">
			{products.length ? (
				<nav>
					{products.map((product) => (
						<Link key={product.id} to={`products/${product.id}`}>
							{product.name ? product.name : <i>Unnamed</i>}
						</Link>
					))}
				</nav>
			) : (
				<p><i>no products here ...</i></p>
			)}
			<div id="product">
				<Outlet />
			</div>
		</div>
	);
}

यदि हम अब एप्लिकेशन को पुनरारंभ करते हैं और मुखपृष्ठ पर जाते हैं, तो हम केवल 'no products here ...' देखेंगे, क्योंकि हमने अभी तक स्टोर में कोई उत्पाद नहीं डाले हैं।

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