React Router में डेटा जोड़ना
पिछले पाठों में हमने लोडर तैयार किया और स्टोरेज से एक विशिष्ट रूट के लिए डेटा अनलोड किया। आइए अब हम अपने एप्लिकेशन के उदाहरण पर देखें कि कैसे एक नया उत्पाद जोड़ा जाए और उसके डेटा को स्टोरेज में लिखा जाए।
फ़ाइल root.jsx खोलें और
nav से पहले एक नया उत्पाद जोड़ने के लिए
बटन को फॉर्म टैग में लपेटकर लेआउट में जोड़ें।
साथ ही अब बटन और हमारी सूची को एक और
div में #menu के साथ लपेटें। लेआउट
अब इस तरह दिखेगा:
return (
<div id="main">
<div id="menu">
<form method="post">
<button type="submit">add product</button>
</form>
{products.length ? (
<nav>
{products.map((product) => (
<Link key={product.id} to={`products/${product.id}`}>
{product.name ? product.name : <i>Unnamed</i>}
</Link>
))}
</nav>
) : (
<p>
<i>no products here ...</i>
</p>
)}
</div>
<div id="product">
<Outlet />
</div>
</div>
);
यदि हम अब डेवलपर पैनल के 'नेटवर्क'
टैब पर जाते हैं, और फिर हमारे बटन पर क्लिक करते हैं,
तो हम सर्वर पर एक त्रुटिपूर्ण दस्तावेज़ अनुरोध देखेंगे।
React Router की मदद से हम सर्वर पर अनुरोध को
छोड़कर, क्लाइंट साइड रूटिंग का फिर से उपयोग करेंगे।
आइए इसके लिए form टैग को
React Router के Form कंपोनेंट से बदलें।
पहले Form का इम्पोर्ट जोड़ें:
import { Form } from 'react-router-dom';
अब कोड के टुकड़े में form टैग बदलें:
<Form method="post">
<button type="submit">add product</button>
</Form>
हमारे एप्लिकेशन को रीलोड करें और डेवलपर पैनल पर फिर से देखें। उत्पाद जोड़ने वाले बटन पर क्लिक करें - अब सर्वर पर कोई अनुरोध नहीं है (अभी के लिए त्रुटि पर ध्यान न दें)।
पिछले पाठों के असाइनमेंट में आपके द्वारा बनाया गया
एप्लिकेशन लें। पाठ की सामग्री का उपयोग करके,
Root फ़ंक्शन के मार्कअप को ठीक करें,
form टैग में एक छात्र जोड़ने के लिए बटन जोड़ें।
सुनिश्चित करें कि बटन दबाने पर सर्वर पर अनुरोध होता है।
और अब form टैग को
Form कंपोनेंट से बदलें। सुनिश्चित करें कि
छात्र जोड़ने वाले बटन पर क्लिक करने पर
सर्वर पर कोई अनुरोध नहीं भेजा जाता है।
