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

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

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

routes/root.jsximport { getProducts } from '../forStorage'

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

routes/root.jsxexport async function loader() {
  const products = await getProducts();
  return { products };
}

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

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

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

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