React Router में दूसरे रूट पर रीडायरेक्ट
अब फॉर्म में डाले गए डेटा उत्पाद संपादित करते समय सहेजे जाते हैं, लेकिन एक समस्या है - डेटा सहेजने के बाद हम फॉर्म वाले पेज पर ही रह जाते हैं, जबकि हमें वापस उत्पाद पेज पर जाना है। इसमें रीडायरेक्ट हमारी मदद करेगा, जिससे हम इस पाठ में परिचित होंगे।
चलिए edit.jsx फ़ाइल खोलते हैं
और redirect को लाइब्रेरी से
आयात करते हैं:
import { redirect } from 'react-router-dom';
और फिर ऐसा करें कि फ़ंक्शन
action अब 1 वापस नहीं करेगा,
बल्कि हमें आवश्यक रूट पर
रीडायरेक्ट करेगा। इस मामले में
हमें उत्पाद वाले पेज पर वापस जाने
की आवश्यकता है:
return redirect(`/products/${params.productId}`);
अब, सेव बटन दबाने पर, हम अपडेटेड डेटा के साथ उत्पाद वाले पेज पर वापस पहुंच जाते हैं।
हम यही सब कुछ नए उत्पाद जोड़ने के लिए भी कर सकते हैं, क्योंकि शायद फॉर्म पर सीधे जाकर उसे भरना अधिक सुविधाजनक होगा। चलिए ऐसा ही करते हैं।
शुरुआत के लिए अब हमें
root.jsx फ़ाइल खोलनी होगी और
redirect को आयात करना होगा,
क्योंकि उत्पाद जोड़ना
रूट पेज पर होता है:
import { redirect } from 'react-router-dom';
फिर से action फ़ंक्शन लेते हैं और
अब product वापस नहीं करेंगे,
बल्कि संपादन पेज पर
रीडायरेक्ट करेंगे:
return redirect(`/products/${product.id}/edit`);
इसे भी जांचते हैं। अब उत्पाद जोड़ने के बटन पर क्लिक करेंगे और उसे संपादित करने के लिए फॉर्म देखेंगे
पिछले पाठों के असाइनमेंट में आपके द्वारा बनाए गए एप्लिकेशन को लें। इस पाठ की सामग्री का उपयोग करके, इसमें फॉर्म वाले पेज पर डेटा सेव करने के बाद छात्र के पेज पर रीडायरेक्ट लागू करें।
और अब मुख्य पेज से छात्र डेटा संपादन फॉर्म वाले पेज पर रीडायरेक्ट लागू करें, जो सूची में छात्र जोड़ने के बटन पर क्लिक करने के बाद होगा।
