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

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

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

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

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

import { getProduct } from '../forStorage';

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

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

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

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

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

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

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

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

const { product } = useLoaderData();

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

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

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

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

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

अपने EditStudent फ़ंक्शन के लिए पाठ में आवश्यक कोड जोड़ें।