React Router में डेटा संपादन के लिए रूट बनाना

पिछले पाठ में हमने एक अलग React घटक EditProduct में संपादन के लिए एक फॉर्म बनाया था।

आइए अब आयात के तुरंत बाद और EditProduct फ़ंक्शन से पहले एक नए रूट के लिए लोडर फ़ंक्शन लिखें। यह product.jsx में जैसा था वैसा ही होगा। फ़ंक्शन को URL पैरामीटर पास किए जाएंगे और फिर हम उसके id द्वारा उत्पाद प्राप्त करेंगे:

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

getProduct को forStorage.js से आयात करें:

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

और अब हम अपना main.jsx खोलेंगे और हमारे द्वारा बनाए गए घटक EditProduct और लोडर को आयात करेंगे:

main.jsximport EditProduct, { loader as editProductLoader } from './routes/edit';

फिर उत्पाद रूट के तुरंत बाद संपादन के लिए रूट ऑब्जेक्ट को children सरणी में जोड़ें:

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

अब एप्लिकेशन लॉन्च करें, एक उत्पाद बनाएं, उस पर क्लिक करें, और फिर संपादन बटन पर क्लिक करें और हमारा फॉर्म देखें।

केवल एक चीज जो अभी भी करनी है, वह यह सुनिश्चित करना है कि संपादन से पहले फॉर्म के फ़ील्ड में वर्तमान डेटा लोड हो। इसके लिए हम edit.jsx में useLoaderData हुक आयात करेंगे:

routes/edit.jsximport { Form, useLoaderData } from 'react-router-dom';

और EditProduct फ़ंक्शन में लोडर से डेटा प्राप्त करने के लिए इसका उपयोग करें। return कमांड से पहले इसे जोड़ें:

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

अब प्रत्येक इनपुट टैग में संबंधित मानों के साथ defaultValue विशेषता जोड़ें। उदाहरण के लिए, पहला इनपुट अब इस तरह दिखेगा:

routes/edit.jsx<input
  placeholder="name"
  type="text"
  name="name"
  defaultValue={product.name}
/>

शेष दो इनपुट के लिए मान क्रमशः 'product.cost' और 'product.amount' होंगे। हालाँकि अभी तक हमारे पास फॉर्म में कोई डेटा नहीं है।