रिएक्ट रूटर में रूट के लिए डेटा लोडर

पिछले पाठ में, हमने उत्पादों का डेटा स्टोरेज से निकाला। अब इस डेटा को रूट एलिमेंट में लोड करने की आवश्यकता है। इसके लिए लोडर (loader) फंक्शन का उपयोग किया जाता है। अब हम इसे बनाएंगे।

root.jsx खोलें, यहाँ getProducts का इम्पोर्ट forStorage.js से जोड़ें:

import { getProducts } from '../forStorage'

इम्पोर्ट लाइनों के तुरंत बाद और फंक्शन Root से पहले, loader फंक्शन लिखें, जो getProducts के माध्यम से हमें स्टोरेज से उत्पादों का डेटा वापस करेगा। वैसे ऐसे फंक्शन अलग फाइल में लिखने चाहिए, लेकिन हम थोड़ा आलस करेंगे, इसलिए चेतावनी पर ध्यान न दें:

export async function loader() {
	const products = await getProducts();
	return { products };
}

अब अपने लोडर को main.jsx में इम्पोर्ट करें। यह लोडर हमारे रूट के लिए होगा, इसलिए इसे rootLoader नाम दें:

import Root, { loader as rootLoader } from './routes/root';

और इसे अपने रूट ऑब्जेक्ट में loader प्रॉपर्टी में जोड़ें:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		loader: rootLoader,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},
]);

पिछले पाठों के असाइनमेंट में आपके द्वारा बनाए गए एप्लिकेशन को लें। पाठ की सामग्री का उपयोग करके, root.jsx फाइल में छात्रों का डेटा लोड करने के लिए loader फंक्शन लिखें और इसे main.jsx में रूट ऑब्जेक्ट में जोड़ें।