React Router में क्लाइंट साइड रूटिंग
इस पाठ में हम सिंगल पेज एप्लिकेशन (SPA) का एक महत्वपूर्ण घटक देखेंगे - क्लाइंट साइड रूटिंग। ऐसी रूटिंग हमें सर्वर से दस्तावेज़ के अतिरिक्त अनुरोधों के बिना ब्राउज़र में URL अपडेट करने की अनुमति देती है।
उस एप्लिकेशन को लॉन्च करें जो हमने पिछले
पाठ में बनाया था। डेवलपर पैनल खोलें और
उसमें 'नेटवर्क' (Chrome के लिए Network)
टैब खोलें। हमारे लिंक पर प्रत्येक क्लिक के
बाद हम document के लिए हर बार एक अनुरोध
देखते हैं। यानी हम हर बार सर्वर से हमारे
लिए document लोड करने के लिए कह रहे हैं।
आइए अब React Router के फायदों का उपयोग
करें ताकि इस तरह के अनुरोधों से छुटकारा
पाया जा सके। इसके लिए हम अपने एप्लिकेशन
का root.jsx खोलेंगे और मार्कअप के
a टैग को Link कंपोनेंट से
बदल देंगे। शुरुआत के लिए इसका इम्पोर्ट
जोड़ते हैं:
import { Outlet, Link } from 'react-router-dom';
अब href एट्रिब्यूट वाले a
टैग को बदल दें। कोड के इस टुकड़े के बजाय:
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
अब हमारे पास निम्नलिखित कोड होगा:
<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>
डेवलपर पैनल पर 'नेटवर्क' टैब फिर से
खोलें, एड्रेस बार में रूट पथ सेट करें और
पेज को रिफ्रेश करें। अब लिंक पर क्लिक करें
और देखें कि document का अनुरोध केवल एक बार
प्रारंभिक लोड पर किया गया था और बाद के
क्लिक पर सर्वर को कोई अनुरोध नहीं है।
वह एप्लिकेशन लें जो आपने पिछले पाठों के असाइनमेंट में बनाया था। पाठ की सामग्री का उपयोग करते हुए, इसमें क्लाइंट साइड रूटिंग लागू करें, जैसा कि पाठ में बताया गया है, अपने लिंक को बदलकर।
