रिएक्ट राउटर v6 आलसी सस्पेंस से जुड़ी मुख्य समस्या यह है कि यह अभी तक सभी ब्राउज़रों द्वारा पूरी तरह से समर्थित नहीं है। इसका मतलब यह है कि रिएक्ट राउटर v6 आलसी सस्पेंस का उपयोग करके वेबसाइटों पर कुछ पृष्ठों या सुविधाओं तक पहुँचने का प्रयास करते समय उपयोगकर्ता समस्याओं का अनुभव कर सकते हैं। इसके अतिरिक्त, अभी भी कुछ बग और प्रदर्शन समस्याएँ हैं जिन्हें उत्पादन वातावरण में उपयोग करने से पहले संबोधित करने की आवश्यकता है। अंत में, सस्पेंस के साथ आलसी लोडिंग घटकों के लिए एपीआई अभी भी अपने शुरुआती चरण में है और मौजूदा अनुप्रयोगों के साथ संगतता सुनिश्चित करने के लिए अतिरिक्त विकास समय की आवश्यकता हो सकती है।
import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
function AppRouter() {
return (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</Router>
);
}
export default AppRouter;
1. यह कोड रिएक्ट लाइब्रेरी, साथ ही रिएक्ट से सस्पेंस घटक और रिएक्ट-राउटर-डोम से ब्राउज़र राउटर, रूट और स्विच घटकों को आयात करता है।
2. इसके बाद यह तीन घटकों (होम, के बारे में, संपर्क) को रिएक्ट की आलसी लोडिंग सुविधा का उपयोग करके उन्हें उनकी संबंधित फाइलों से आयात करने के लिए परिभाषित करता है।
3. AppRouter फ़ंक्शन परिभाषित किया गया है जो इसके अंदर एक स्विच घटक के साथ एक सस्पेंस घटक वाले राउटर घटक को लौटाता है।
4. स्विच घटक के अंदर तीन रूट घटक होते हैं जो प्रत्येक आयातित घटकों में से एक को प्रस्तुत करते हैं जब उनके संबंधित पथ URL में मेल खाते हैं (उदाहरण के लिए, '/' होम के लिए)।
5. अंत में, AppRouter को निर्यात किया जाता है ताकि इसे एप्लिकेशन में कहीं और इस्तेमाल किया जा सके।
आप प्रतिक्रिया राउटर v6 में आलसी लोडिंग का उपयोग कैसे करते हैं
v6
आलसी लोडिंग एक ऐसी तकनीक है जिसका उपयोग कुछ घटकों की लोडिंग को तब तक के लिए टालने के लिए किया जाता है जब तक कि उनकी आवश्यकता न हो। रिएक्ट राउटर v6 में, गतिशील आयात () सिंटैक्स का उपयोग करके आलसी लोडिंग प्राप्त की जा सकती है। यह सिंटैक्स आपको अपने कोड को कई बंडलों में विभाजित करने की अनुमति देता है जिसे बाद में मांग पर या समानांतर में लोड किया जा सकता है। यह शुरुआती बंडल आकार को कम करने और प्रदर्शन को बेहतर बनाने में मदद करता है। रिएक्ट राउटर v6 के साथ आलसी लोडिंग का उपयोग करने के लिए, आपको उस घटक को लपेटना होगा जिसे आप गतिशील आयात () कॉल में आलसी लोड करना चाहते हैं। आयात () कॉल एक वादा लौटाएगा जो हल करेगा जब घटक लोड हो गया है और प्रस्तुत करने के लिए तैयार है।
प्रतिक्रिया में सस्पेंस और आलस्य क्या है
रिएक्ट राउटर में सस्पेंस एक मार्ग के लोड होने में देरी करने का एक तरीका है जब तक कि कुछ शर्त पूरी नहीं हो जाती। इसका उपयोग किसी एप्लिकेशन के प्रदर्शन को बेहतर बनाने के लिए किया जा सकता है, जब जरूरत पड़ने पर केवल मार्गों को लोड किया जा सकता है। उदाहरण के लिए, यदि कोई उपयोगकर्ता किसी ऐसे पृष्ठ पर नेविगेट कर रहा है जिसके लिए प्रमाणीकरण की आवश्यकता है, तो प्रमाणीकरण पूरा होने तक मार्ग में देरी हो सकती है।
रिएक्ट राउटर में आलसी लोडिंग घटकों को एसिंक्रोनस रूप से लोड करने की अनुमति देता है जब उन्हें एक साथ लोड करने के बजाय उनकी आवश्यकता होती है। यह आवश्यक होने पर केवल घटकों को लोड करके प्रदर्शन में सुधार करता है और डेटा की मात्रा को कम करता है जिसे नेटवर्क पर स्थानांतरित करने की आवश्यकता होती है। आलसी लोडिंग कोड विभाजन के साथ भी मदद करती है, जिससे बड़े अनुप्रयोगों को छोटे हिस्सों में विभाजित किया जा सकता है जिन्हें मांग पर लोड किया जा सकता है।
