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

पिछले पाठ में, हमने उत्पाद पेज के डेटा को प्राप्त करने के लिए एक फ़ंक्शन लिखा था, आइए product.jsx फ़ाइल में getProduct को इम्पोर्ट करें:

routes/product.jsximport { getProduct } from '../forStorage';

इम्पोर्ट के तुरंत बाद और Product फ़ंक्शन से पहले loader फ़ंक्शन लिखें। इसमें URL पैरामीटर्स पास करें:

routes/product.jsxexport async function loader({ params }) {
  const product = await getProduct(params.productId);
  return { product };
}

लोडर द्वारा प्राप्त डेटा का उपयोग करने के लिए useLoaderData हुक को भी इम्पोर्ट करें:

routes/product.jsximport { useLoaderData } from 'react-router-dom';

useLoaderData को लागू करें, और तदनुसार Product फ़ंक्शन की शुरुआत में product ऑब्जेक्ट बनाने वाली लाइन को निम्नलिखित से बदलें:

routes/product.jsxconst { product } = useLoaderData();

और, निश्चित रूप से, हमारे मार्कअप को थोड़ा बदल दें, क्योंकि हमने पुराना product ऑब्जेक्ट हटा दिया है। पैराग्राफ की सामग्री को बदलें:

routes/product.jsx<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

निम्नलिखित से:

routes/product.jsx<p>Name: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Amount: {product.amount ? product.amount : <i>unknown</i>}</p>

हमें main.jsx को खोलना बाकी है और वहाँ loader को इम्पोर्ट करना है, इसे productLoader नाम दें:

main.jsximport Product, {
  loader as productLoader,
} from './routes/product';

और इसे उत्पाद पेज के रूट ऑब्जेक्ट के लिए लोडर के रूप में निर्दिष्ट करें, element प्रॉपर्टी के बाद children में इसे जोड़ें:

main.jsxchildren: [
  {
    path: 'products/:productId',
    element: <Product />,
    loader: productLoader,
  },
],

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