उन्नत रिएक्ट राउटर V6 तकनीक: बुनियादी बातों से परे जाना

मैं आज आपके साथ कुछ उन्नत साझा करने के लिए वास्तव में उत्साहित हूं। रिएक्ट राउटर एक अद्भुत उपकरण है जो हमें अपने अनुप्रयोगों में गतिशील और सुचारू नेविगेशन बनाने में सक्षम बनाता है। रिएक्ट राउटर तकनीकों को रिएक्ट हालाँकि इसका उपयोग आमतौर पर बुनियादी रूटिंग आवश्यकताओं के लिए किया जाता है, लेकिन कुछ कम-ज्ञात तकनीकें हैं जो आपकी रूटिंग क्षमताओं को बिल्कुल नए स्तर तक बढ़ा सकती हैं। आज, मैं अपने कुछ पसंदीदा साझा करूँगा जो मैंने समय के साथ खोजे हैं। हम कवर करेंगे: कुख्यात 404 पेज को संभालना। वर्तमान मार्ग को उजागर करने के लिए एक सक्रिय पृष्ठ संकेतक बनाना। और हुक का उपयोग करना। useNavigate useLocation जब तक आप इस लेख को पढ़ना समाप्त करेंगे, तब तक आपको इन उन्नत रिएक्ट राउटर तकनीकों की मजबूत समझ हो जाएगी और आप उन्हें अपनी परियोजनाओं में लागू करने में आत्मविश्वास महसूस करेंगे। तो, आइए सीधे इसमें उतरें और अपने रूटिंग कौशल को एक साथ बढ़ाएं! क्या आप तैयार हैं? आएँ शुरू करें! 404 पृष्ठ से निपटना बड़ी परियोजनाओं पर काम करते समय, उन मार्गों का ध्यान रखना आवश्यक है जो नहीं मिल सकते हैं। हम अक्सर इन मार्गों को के रूप में संदर्भित करते हैं क्योंकि जब कोई दस्तावेज़ सर्वर पर नहीं मिलता है तो वे 404 लौटाते हैं। 404 मार्गों HTTP स्थिति कोड वैसे, यदि आप बिल्ली प्रेमी हैं, तो आप देखने का आनंद ले सकते हैं। http.cat को अब, आइए एक विशेष रूट बनाने पर विचार करें जो तब ट्रिगर हो जाएगा जब कोई भी अन्य रूट ब्राउज़र में वर्तमान यूआरएल से मेल नहीं खाएगा। import {BrowserRouter, Routes, Route} from "react-router-dom"; function App() { return Landing page

}> Products page

}> 404 page

}> } प्राथमिक पृष्ठ तक पहुंचने पर, उपयोगकर्ताओं को लैंडिंग पृष्ठ पर निर्देशित किया जाएगा। पृष्ठ पर नेविगेट करने से वे उत्पाद पृष्ठ पर पहुंच जाएंगे। हालाँकि, यदि कोई अन्य लिंक एक्सेस किया जाता है जो किसी विशिष्ट मार्ग से मेल नहीं खाता है, तो 404 पृष्ठ प्रदर्शित किया जाएगा। / /products इस व्यवहार के पीछे का कारण 404 पेज के लिए एक विशेष का कार्यान्वयन है, जहां पथ संपत्ति पर सेट है। यह कॉन्फ़िगरेशन सुनिश्चित करता है कि रिएक्ट राउटर विशेष रूप से इस मार्ग का उपयोग करेगा जब कोई अन्य मार्ग मेल नहीं खा सकता है। 404 रूट का विशिष्ट स्थान अप्रासंगिक है और इसे इसके अभिन्न घटक के रूप में अनुभाग के भीतर कहीं भी स्थित किया जा सकता है। * ... सक्रिय पृष्ठ एक अन्य तरीका जिससे ऐप्स व्यावहारिक तरीके से मार्गों का उपयोग कर सकते हैं, वह है मेनू में वर्तमान में सक्रिय पृष्ठ को हाइलाइट करना। आइए कल्पना करें कि आपके पास दो लिंक वाला एक नेविगेशन मेनू है: होम - यह लिंक उपयोगकर्ता को मुख्य पृष्ठ पर ले जाता है। / About - यह लिंक उपयोगकर्ता को about पेज पर ले जाता है। /about रिएक्ट राउटर के साथ, जब उपयोगकर्ता रूट पर होता है तो लिंक को स्वचालित रूप से हाइलाइट करना संभव हो जाता है। इसी तरह, जब उपयोगकर्ता रूट पर हो तो आप होम लिंक को हाइलाइट कर सकते हैं। सबसे अच्छी बात यह है कि आप इसे जटिल शर्तों की आवश्यकता के बिना हासिल कर सकते हैं। /about About / इसे कार्यान्वित करने का एक सरल तरीका यहां दिया गया है: import {NavLink} from "react-router-dom"; function getClassName({isActive}) { if (isActive) { return "active"; // CSS class } } function App() { return Home About } जो कोड आप ऊपर देख रहे हैं उसे कक्षा को कार्यान्वित करने के लिए कुछ सीएसएस की आवश्यकता है। इसलिए, हम वर्तमान में सक्रिय पेज के मेनू लिंक को बोल्ड और अलग दिखाकर इसे बढ़ा सकते हैं। active .active { font-weight: bold; } तत्व की विशेषता में केवल एक स्ट्रिंग के बजाय किसी फ़ंक्शन को स्वीकार करने की लचीलापन है। जब आप किसी फ़ंक्शन का उपयोग करने का निर्णय लेते हैं, तो इसे एक पैरामीटर के रूप में एक ऑब्जेक्ट दिया जाएगा, और इस ऑब्जेक्ट में प्रॉपर्टी पहले से ही सेट होगी। फ़ंक्शन के भीतर इस प्रॉपर्टी तक आसानी से पहुंचने के लिए, हम पैरामीटर में शामिल करके डिस्ट्रक्चरिंग का उपयोग करते हैं। NavLink className isActive {isActive} इसके बाद, हम यह सत्यापित करने के लिए आगे बढ़ते हैं कि क्या सत्य मान रखता है। यदि ऐसा है, तो हम वर्ग का नाम लौटा देंगे। isActive सीएसएस active जब रिएक्ट राउटर में वर्तमान पथ घटक की विशेषता मेल खाता है, तो फ़ंक्शन एक बूलियन मान का मूल्यांकन करेगा। NavLink to isActive परिणामस्वरूप, रिएक्ट राउटर मूल रूप से संबंधित तत्व में वर्ग को शामिल करेगा, जो इसे वर्तमान में सक्रिय मार्ग के रूप में इंगित करेगा। active छोटा संस्करण यदि आप एक छोटा दृष्टिकोण पसंद करते हैं, तो आप ऊपर उल्लिखित कोड को दोबारा करने के लिए टर्नरी ऑपरेटर का उपयोग कर सकते हैं। यह ऑपरेटर प्रारूप: . condition ? truthy expression : falsy expression मैं वास्तव में टर्नरी ऑपरेटर का अधिक उपयोग नहीं करता क्योंकि यह अक्सर कोड को कम पठनीय बना सकता है। हालाँकि, इस मामले में इसका उपयोग स्वीकार्य है। उदाहरण के तौर पर निम्नलिखित पर विचार करें: function getClassName({isActive}) { if (isActive) { return "active"; } else { return ""; } } आप उपरोक्त कोड को निम्नलिखित दृष्टिकोण से प्रतिस्थापित कर सकते हैं: function getClassName({isActive}) { return isActive ? "active" : ""; } आपको बस यह सुनिश्चित करना होगा कि रिटर्न स्टेटमेंट टर्नरी ऑपरेटर के बाहर रखा गया है। जब स्थिति सत्य होती है, तो के बाद का व्यंजक होता है। निष्पादित किया जाएगा। अन्यथा, के बाद की अभिव्यक्ति निष्पादित की जाएगी। isActive ? "active" : "" अब, हम नामक एक अलग फ़ंक्शन परिभाषा की आवश्यकता को समाप्त कर सकते हैं। इसके बजाय, हम इस तरह एक एरो फ़ंक्शन का उपयोग कर सकते हैं: . getClassName ({isActive}) => isActive ? "active" : "" यदि आपको यह परिवर्तन पढ़ने में बहुत कठिन लगता है, तो आप पहले की तरह एक अलग फ़ंक्शन का उपयोग जारी रख सकते हैं। अंतिम कोड इस तरह दिखेगा: import {NavLink} from "react-router-dom"; function App() { return isActive ? "active" : ""}>Home isActive ? "active" : ""}>About } हे लड़के, मैं व्यावहारिक रूप से तुम्हारे विचार सुन सकता हूँ! सोजिन, आपने जाकर DRY सिद्धांत को तोड़ दिया है, है ना? यह सिर्फ एक उदाहरण है। सब कुछ करने की जरूरत नहीं है 😀 लिंक और नेवलिंक के बीच चयन: क्या चीज़ उन्हें अलग करती है? आपने पहले ही देखा होगा कि मैं अपने सामान्य मित्र, के बजाय उपयोग कर रहा हूं। लेकिन चिंता न करें, मैं समझाता हूं क्यों। आप देखते हैं, घटक आपको प्रोप के लिए फ़ंक्शन परिभाषा का उपयोग करने की अनुमति नहीं देता है। हाँ, यह आश्चर्यजनक हो सकता है, लेकिन जब आप के साथ काम कर रहे होते हैं तो ऐसा ही होता है। Link NavLink className एक सामान्य गलती जो मैंने देखी है वह यह है कि जूनियर रिएक्ट डेवलपर्स घटक के प्रोप में फ़ंक्शन परिभाषाओं का उपयोग करने की कोशिश कर रहे हैं, जो बस काम नहीं करता है। className यदि आप रुचि रखते हैं, तो मैं इस विषय पर एक लेख लिख सकता हूँ। मुझे बस टिप्पणियों से बताएं! नेविगेशन का उपयोग करें कुछ परिस्थितियों में, आपको अपने रिएक्ट एप्लिकेशन के भीतर पृष्ठों को प्रोग्रामेटिक रूप से स्थानांतरित करने की आवश्यकता हो सकती है। उदाहरण के लिए, विज़िटर को किसी विशिष्ट पृष्ठ पर पुनर्निर्देशित करने के लिए, आप एक अनुरोध सबमिट कर सकते हैं और प्रतिक्रिया की प्रतीक्षा कर सकते हैं। कुछ उदाहरण निम्नलिखित हैं: यदि उपयोगकर्ता साइन इन नहीं है, तो उन्हें लॉगिन पृष्ठ पर भेजें। GetLogin अनुरोध सफलतापूर्वक पूरा होने के बाद, उपयोगकर्ता को पर रीडायरेक्ट करें। /dashboard इसके लिए हुक का उपयोग करना आवश्यक है, जो एक फ़ंक्शन लौटाता है जिसका उपयोग आप प्रोग्रामेटिक रूप से उपयोगकर्ता को एक नए रूट पर रीडायरेक्ट करने के लिए कर सकते हैं। useNavigate() नज़र रखना: import React, {useEffect} from "react"; import {useNavigate} from "react-router-dom"; function HelpPage() { const navigate = useNavigate(); useEffect(() => { const isLoggedIn = window.localStorage.getItem("isLoggedIn"); if (!isLoggedIn) { navigate("/login"); } }, []); return Help page ; } ब्राउज़रराउटर का उपयोग करना आवश्यक है! इस उदाहरण में, हम जांच कर रहे हैं कि क्या लोकलस्टोरेज में कुंजी को कोई मान सौंपा गया है। यदि ऐसा नहीं होता है, तो हम फ़ंक्शन का उपयोग करके उपयोगकर्ता को पृष्ठ पर रीडायरेक्ट करेंगे। isLoggedIn navigate("/login") /login इसे काम करने के लिए, बस उस घटक के भीतर हुक का उपयोग करना याद रखें जो घटक के अंदर निहित है। अन्यथा, यह ठीक से काम नहीं करेगा. useNavigate() उदाहरण के लिए, निम्नलिखित उदाहरण काम नहीं करेगा: import React from "react"; import {BrowserRouter, useNavigate} from "react-router-dom"; function App() { // ❌ This breaks because the component was not wrapped by BrowserRouter, but its children are. const history = useNavigate(); return {/* ... */} ; } यदि आप घटक के अंदर हुक का उपयोग करने का प्रयास कर रहे हैं, तो आपको थोड़ी परेशानी हो सकती है। ऐसा इसलिए है क्योंकि यह तब तक काम नहीं करेगा जब तक आप घटक को के साथ लपेट नहीं देते। App() useNavigate() App() लेकिन घबराना नहीं! अच्छी खबर यह है कि ऐप के अंदर सभी चाइल्ड घटक स्वचालित रूप से द्वारा लपेटे जाएंगे, ताकि आप बिना किसी समस्या के उन चाइल्ड घटकों में ख़ुशी से उपयोग कर सकें। useNavigate() हालाँकि, यदि आपको वास्तव में घटक में ही उपयोग करने की आवश्यकता है, तो एक सरल समाधान है। आपको बस एक मूल घटक बनाने की आवश्यकता है जो को लपेटता है और उस मूल घटक के अंदर ले जाना सुनिश्चित करता है। एक बार जब आप ऐसा कर लेते हैं, तो आप जाने के लिए तैयार हो जाएंगे और अपने दिल की इच्छा के अनुसार घटक में उपयोग कर सकते हैं 💗 useNavigate() useNavigate() पहुंच और उचित लिंक उपयोग सुनिश्चित करना जब आपकी वेबसाइट को सुलभ बनाने की बात आती है, तो इस बात पर ध्यान देना महत्वपूर्ण है कि आपके लिंक कैसे संरचित हैं। यह सुनिश्चित करने के लिए, अन्य तरीकों के बजाय तत्वों का उपयोग करने की अनुशंसा की जाती है। क्यों? खैर, ये तत्व स्वचालित रूप से टैग के रूप में प्रस्तुत होंगे, जो अपनी के लिए जाने जाते हैं। पहुंच सुविधाओं अब, यहां एक अनुकूल सलाह दी गई है: अपने सामान्य तत्वों को द्वारा प्रदान की गई विधि से बदलने से बचें। इस विधि का उपयोग केवल उन मामलों में किया जाना चाहिए जहां तत्व का उपयोग करना संभव नहीं है। useNavigate() .push() ऐसा कब होता है? आमतौर पर, यह तब होता है जब आपको कुछ तर्कों के आधार पर उपयोगकर्ताओं को प्रोग्रामेटिक रूप से रीडायरेक्ट करने की आवश्यकता होती है, जैसे कि ऑपरेशन का परिणाम। fetch() स्थान का उपयोग करें यदि आप हर बार रिएक्ट राउटर आपको एक नए पते पर ले जाते हैं तो आप कोड का एक टुकड़ा निष्पादित करना चाहते हैं तो क्या होगा? आप हुक की सहायता से इसे आसानी से पूरा कर सकते हैं। लेकिन इससे पहले कि हम विवरण में उतरें, आइए कुछ परिदृश्यों का पता लगाएं जहां यह काम आ सकता है। सबसे आम उपयोग के मामलों में से एक Google Analytics जैसी आपकी एनालिटिक्स सेवा पर एक ईवेंट भेजना है। useLocation पेजव्यू हालाँकि, यह उल्लेखनीय है कि Google Analytics 4 अब स्वचालित रूप से इसका ध्यान रखता है, इसलिए जरूरी नहीं कि आपको इसे स्वयं लागू करना पड़े। फिर भी, हुक के बारे में सीखना अभी भी मूल्यवान है, क्योंकि आपको इसके लिए अन्य उद्देश्य मिल सकते हैं। उदाहरण के लिए, आप इसका उपयोग अन्य पुस्तकालयों और विश्लेषण सेवाओं के साथ एकीकृत करने, या विज़िट किए गए मार्गों के आधार पर विशिष्ट कार्यों को निष्पादित करने के लिए कर सकते हैं। useLocation संभावनाएं अनंत हैं! उपयोग स्थान हुक हुक बहुत उपयोगी है क्योंकि यह आपको वर्तमान में उपयोग किए जा रहे मार्ग के बारे में जानकारी देता है। useLocation यहां यूज़लोकेशन हुक का उपयोग करने के बारे में एक मित्रवत मार्गदर्शिका दी गई है: import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom"; import {createRoot} from "react-dom/client"; function App() { const location = useLocation(); console.log(location.pathname); return {/* routes here... */} } createRoot(document.querySelector("#react-root")).render( ); अब, आप स्थान चर के माध्यम से मार्ग की जानकारी तक पहुंच सकते हैं। यह एक ऑब्जेक्ट है जिसमें वर्तमान शामिल है। pathname यह पता लगाने के लिए कि उपयोगकर्ता वर्तमान में कौन सा मार्ग ब्राउज़ कर रहा है, बस का उपयोग करें। यह आपको , , या आपके द्वारा सेट किया गया कोई अन्य मार्ग जैसा कुछ देगा। location.pathname / /about याद रखें, हुक की तरह, आपके कोड को द्वारा लपेटे गए घटक के अंदर चलना महत्वपूर्ण है। अन्यथा, हुक अपना जादू नहीं चला पाएगा। useNavigate useLocation स्थान परिवर्तन पर प्रतिक्रिया देना जब स्थान बदलता है, तो आप रिएक्ट राउटर में वर्तमान यूआरएल पथ तक पहुंचने के लिए हुक का उपयोग कर सकते हैं। अपने कोड को हुक के साथ लपेटकर और निर्भरता को पर सेट करके, जब भी किसी नए यूआरएल पर नेविगेशन हो तो आप कोड का एक विशिष्ट टुकड़ा चला सकते हैं। useLocation useEffect location इसे कैसे करें इसका एक उदाहरण यहां दिया गया है: import React, {useEffect} from "react"; import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom"; import {createRoot} from "react-dom/client"; function App() { const location = useLocation(); // run a piece of code on location change useEffect(() => { console.log(location.pathname); // send it to analytic, or do some conditional logic here }, [location]); return {/* routes here... */} } createRoot(document.querySelector("#react-root")).render( ); जब भी उपयोगकर्ता नेविगेशन के दौरान किसी नए मार्ग पर जाता है, तो हुक के अंदर का कोड चलेगा और अपना काम करेगा। यह मूल रूप से यह सुनिश्चित करने का एक तरीका है कि जब भी स्थान ऑब्जेक्ट में कोई परिवर्तन होता है तो विशिष्ट कोड निष्पादित हो जाता है। useEffect बढ़िया काम, अब आप एक रिएक्ट राउटर विशेषज्ञ हैं इसे समाप्त करने के लिए, इस लेख ने आपको रिएक्ट राउटर की गहरी समझ दी है। हालाँकि हो सकता है कि आप यहाँ चर्चा की गई सभी सुविधाओं का उपयोग न करें। फिर भी यह शानदार है कि आप उनके बारे में जानते हैं। यदि आपको भविष्य में कभी भी इसी तरह की कार्यक्षमता को शामिल करने की आवश्यकता महसूस होती है, तो आप जानते हैं कि कहां देखना है। इसलिए, आसान संदर्भ के लिए इस पोस्ट को सहेजना या बुकमार्क करना सुनिश्चित करें। और याद रखें, यदि आपके कोई प्रश्न हैं या आपको अतिरिक्त सहायता की आवश्यकता है, तो बेझिझक ट्विटर पर मुझसे संपर्क करें। मैं मदद के लिए यहाँ हूँ!