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

मैं आज आपके साथ कुछ उन्नत रिएक्ट राउटर तकनीकों को साझा करने के लिए वास्तव में उत्साहित हूं। रिएक्ट राउटर एक अद्भुत उपकरण है जो हमें अपने रिएक्ट अनुप्रयोगों में गतिशील और सुचारू नेविगेशन बनाने में सक्षम बनाता है।

हालाँकि इसका उपयोग आमतौर पर बुनियादी रूटिंग आवश्यकताओं के लिए किया जाता है, लेकिन कुछ कम-ज्ञात तकनीकें हैं जो आपकी रूटिंग क्षमताओं को बिल्कुल नए स्तर तक बढ़ा सकती हैं।

आज, मैं अपने कुछ पसंदीदा साझा करूँगा जो मैंने समय के साथ खोजे हैं।

हम कवर करेंगे:

1. कुख्यात 404 पेज को संभालना।
2. वर्तमान मार्ग को उजागर करने के लिए एक सक्रिय पृष्ठ संकेतक बनाना।
3. useNavigate और useLocation हुक का उपयोग करना।

जब तक आप इस लेख को पढ़ना समाप्त करेंगे, तब तक आपको इन उन्नत रिएक्ट राउटर तकनीकों की मजबूत समझ हो जाएगी और आप उन्हें अपनी परियोजनाओं में लागू करने में आत्मविश्वास महसूस करेंगे।

तो, आइए सीधे इसमें उतरें और अपने रूटिंग कौशल को एक साथ बढ़ाएं!

क्या आप तैयार हैं? आएँ शुरू करें!

404 पृष्ठ से निपटना

बड़ी परियोजनाओं पर काम करते समय, उन मार्गों का ध्यान रखना आवश्यक है जो नहीं मिल सकते हैं। हम अक्सर इन मार्गों को 404 मार्गों के रूप में संदर्भित करते हैं क्योंकि जब कोई दस्तावेज़ सर्वर पर नहीं मिलता है तो वे HTTP स्थिति कोड 404 लौटाते हैं।

वैसे, यदि आप बिल्ली प्रेमी हैं, तो आप http.cat को देखने का आनंद ले सकते हैं।

अब, आइए एक विशेष रूट बनाने पर विचार करें जो तब ट्रिगर हो जाएगा जब कोई भी अन्य रूट ब्राउज़र में वर्तमान यूआरएल से मेल नहीं खाएगा।

 import {BrowserRouter, Routes, Route} from "react-router-dom"; function App() { return <BrowserRouter> <Routes> <Route path="/" element={<p>Landing page</p>}></Route> <Route path="/products" element={<p>Products page</p>}></Route> <Route path="*" element={<p>404 page</p>}></Route> </Routes> </BrowserRouter> }

प्राथमिक पृष्ठ / तक पहुंचने पर, उपयोगकर्ताओं को लैंडिंग पृष्ठ पर निर्देशित किया जाएगा। /products पृष्ठ पर नेविगेट करने से वे उत्पाद पृष्ठ पर पहुंच जाएंगे। हालाँकि, यदि कोई अन्य लिंक एक्सेस किया जाता है जो किसी विशिष्ट मार्ग से मेल नहीं खाता है, तो 404 पृष्ठ प्रदर्शित किया जाएगा।

इस व्यवहार के पीछे का कारण 404 पेज के लिए एक विशेष <Route> का कार्यान्वयन है, जहां पथ संपत्ति * पर सेट है। यह कॉन्फ़िगरेशन सुनिश्चित करता है कि रिएक्ट राउटर विशेष रूप से इस मार्ग का उपयोग करेगा जब कोई अन्य मार्ग मेल नहीं खा सकता है। 404 रूट का विशिष्ट स्थान अप्रासंगिक है और इसे इसके अभिन्न घटक के रूप में <Routes>...</Routes> अनुभाग के भीतर कहीं भी स्थित किया जा सकता है।

सक्रिय पृष्ठ

एक अन्य तरीका जिससे ऐप्स व्यावहारिक तरीके से मार्गों का उपयोग कर सकते हैं, वह है मेनू में वर्तमान में सक्रिय पृष्ठ को हाइलाइट करना।

आइए कल्पना करें कि आपके पास दो लिंक वाला एक नेविगेशन मेनू है:

1. होम - यह लिंक उपयोगकर्ता को मुख्य पृष्ठ / पर ले जाता है।

2. About - यह लिंक उपयोगकर्ता को about पेज /about पर ले जाता है।

   
   

रिएक्ट राउटर के साथ, जब उपयोगकर्ता /about रूट पर होता है तो About लिंक को स्वचालित रूप से हाइलाइट करना संभव हो जाता है। इसी तरह, जब उपयोगकर्ता / रूट पर हो तो आप होम लिंक को हाइलाइट कर सकते हैं। सबसे अच्छी बात यह है कि आप इसे जटिल शर्तों की आवश्यकता के बिना हासिल कर सकते हैं।

इसे कार्यान्वित करने का एक सरल तरीका यहां दिया गया है:

 import {NavLink} from "react-router-dom"; function getClassName({isActive}) { if (isActive) { return "active"; // CSS class } } function App() { return <ul> <li> <NavLink to="/" className={getClassName}>Home</NavLink> </li> <li> <NavLink to="/about" className={getClassName}>About</NavLink> </li> </ul> }

जो कोड आप ऊपर देख रहे हैं उसे active कक्षा को कार्यान्वित करने के लिए कुछ सीएसएस की आवश्यकता है। इसलिए, हम वर्तमान में सक्रिय पेज के मेनू लिंक को बोल्ड और अलग दिखाकर इसे बढ़ा सकते हैं।

 .active { font-weight: bold; }

NavLink तत्व की className विशेषता में केवल एक स्ट्रिंग के बजाय किसी फ़ंक्शन को स्वीकार करने की लचीलापन है। जब आप किसी फ़ंक्शन का उपयोग करने का निर्णय लेते हैं, तो इसे एक पैरामीटर के रूप में एक ऑब्जेक्ट दिया जाएगा, और इस ऑब्जेक्ट में isActive प्रॉपर्टी पहले से ही सेट होगी। फ़ंक्शन के भीतर इस प्रॉपर्टी तक आसानी से पहुंचने के लिए, हम पैरामीटर में {isActive} शामिल करके डिस्ट्रक्चरिंग का उपयोग करते हैं।

इसके बाद, हम यह सत्यापित करने के लिए आगे बढ़ते हैं कि क्या isActive सत्य मान रखता है। यदि ऐसा है, तो हम सीएसएस वर्ग का नाम active लौटा देंगे।

जब रिएक्ट राउटर में वर्तमान पथ NavLink घटक की विशेषता to मेल खाता है, तो isActive फ़ंक्शन एक बूलियन मान का मूल्यांकन करेगा।

परिणामस्वरूप, रिएक्ट राउटर मूल रूप से संबंधित <NavLink /> तत्व में 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 <ul> <li> <NavLink to="/" className={({isActive}) => isActive ? "active" : ""}>Home</NavLink> </li> <li> <NavLink to="/about" className={({isActive}) => isActive ? "active" : ""}>About</NavLink> </li> </ul> }

लिंक और नेवलिंक के बीच चयन: क्या चीज़ उन्हें अलग करती है?

आपने पहले ही देखा होगा कि मैं अपने सामान्य मित्र, Link के बजाय NavLink उपयोग कर रहा हूं। लेकिन चिंता न करें, मैं समझाता हूं क्यों। आप देखते हैं, <Link /> घटक आपको className प्रोप के लिए फ़ंक्शन परिभाषा का उपयोग करने की अनुमति नहीं देता है। हाँ, यह आश्चर्यजनक हो सकता है, लेकिन जब आप <Link /> के साथ काम कर रहे होते हैं तो ऐसा ही होता है।

एक सामान्य गलती जो मैंने देखी है वह यह है कि जूनियर रिएक्ट डेवलपर्स <Link /> घटक के 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 <h2>Help page</h2>; }

ब्राउज़रराउटर का उपयोग करना आवश्यक है!

इस उदाहरण में, हम जांच कर रहे हैं कि क्या लोकलस्टोरेज में कुंजी isLoggedIn को कोई मान सौंपा गया है। यदि ऐसा नहीं होता है, तो हम navigate("/login") फ़ंक्शन का उपयोग करके उपयोगकर्ता को /login पृष्ठ पर रीडायरेक्ट करेंगे।

इसे काम करने के लिए, बस उस घटक के भीतर useNavigate() हुक का उपयोग करना याद रखें जो <BrowserRouter /> घटक के अंदर निहित है। अन्यथा, यह ठीक से काम नहीं करेगा.

उदाहरण के लिए, निम्नलिखित उदाहरण काम नहीं करेगा:

 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 <BrowserRouter> {/* ... */} </BrowserRouter>; }

यदि आप App() घटक के अंदर useNavigate() हुक का उपयोग करने का प्रयास कर रहे हैं, तो आपको थोड़ी परेशानी हो सकती है। ऐसा इसलिए है क्योंकि यह तब तक काम नहीं करेगा जब तक आप App() घटक को <BrowserRouter /> के साथ लपेट नहीं देते।

लेकिन घबराना नहीं!

अच्छी खबर यह है कि ऐप के अंदर सभी चाइल्ड घटक स्वचालित रूप से <BrowserRouter /> द्वारा लपेटे जाएंगे, ताकि आप बिना किसी समस्या के उन चाइल्ड घटकों में ख़ुशी से useNavigate() उपयोग कर सकें।

हालाँकि, यदि आपको वास्तव में <App /> घटक में ही useNavigate() उपयोग करने की आवश्यकता है, तो एक सरल समाधान है। आपको बस एक मूल घटक बनाने की आवश्यकता है जो <App /> को लपेटता है और <BrowserRouter /> उस मूल घटक के अंदर ले जाना सुनिश्चित करता है। एक बार जब आप ऐसा कर लेते हैं, तो आप जाने के लिए तैयार हो जाएंगे और अपने दिल की इच्छा के अनुसार <App /> घटक में useNavigate() उपयोग कर सकते हैं 💗

पहुंच और उचित लिंक उपयोग सुनिश्चित करना

जब आपकी वेबसाइट को सुलभ बनाने की बात आती है, तो इस बात पर ध्यान देना महत्वपूर्ण है कि आपके लिंक कैसे संरचित हैं। यह सुनिश्चित करने के लिए, अन्य तरीकों के बजाय <Link /> तत्वों का उपयोग करने की अनुशंसा की जाती है।

क्यों?

खैर, ये तत्व स्वचालित रूप से <a> टैग के रूप में प्रस्तुत होंगे, जो अपनी पहुंच सुविधाओं के लिए जाने जाते हैं।

ऐसा कब होता है?

आमतौर पर, यह तब होता है जब आपको कुछ तर्कों के आधार पर उपयोगकर्ताओं को प्रोग्रामेटिक रूप से रीडायरेक्ट करने की आवश्यकता होती है, जैसे कि fetch() ऑपरेशन का परिणाम।

स्थान का उपयोग करें

यदि आप हर बार रिएक्ट राउटर आपको एक नए पते पर ले जाते हैं तो आप कोड का एक टुकड़ा निष्पादित करना चाहते हैं तो क्या होगा?

आप useLocation हुक की सहायता से इसे आसानी से पूरा कर सकते हैं। लेकिन इससे पहले कि हम विवरण में उतरें, आइए कुछ परिदृश्यों का पता लगाएं जहां यह काम आ सकता है। सबसे आम उपयोग के मामलों में से एक Google Analytics जैसी आपकी एनालिटिक्स सेवा पर एक पेजव्यू ईवेंट भेजना है।

हालाँकि, यह उल्लेखनीय है कि 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> {/* routes here... */} </Routes> } createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>);

अब, आप स्थान चर के माध्यम से मार्ग की जानकारी तक पहुंच सकते हैं। यह एक ऑब्जेक्ट है जिसमें वर्तमान pathname शामिल है।

यह पता लगाने के लिए कि उपयोगकर्ता वर्तमान में कौन सा मार्ग ब्राउज़ कर रहा है, बस location.pathname का उपयोग करें। यह आपको / , /about , या आपके द्वारा सेट किया गया कोई अन्य मार्ग जैसा कुछ देगा।

याद रखें, useNavigate हुक की तरह, आपके कोड को <BrowserRouter /> द्वारा लपेटे गए घटक के अंदर चलना महत्वपूर्ण है। अन्यथा, 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> {/* routes here... */} </Routes> } createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>);

जब भी उपयोगकर्ता नेविगेशन के दौरान किसी नए मार्ग पर जाता है, तो useEffect हुक के अंदर का कोड चलेगा और अपना काम करेगा। यह मूल रूप से यह सुनिश्चित करने का एक तरीका है कि जब भी स्थान ऑब्जेक्ट में कोई परिवर्तन होता है तो विशिष्ट कोड निष्पादित हो जाता है।

बढ़िया काम, अब आप एक रिएक्ट राउटर विशेषज्ञ हैं

इसे समाप्त करने के लिए, इस लेख ने आपको रिएक्ट राउटर की गहरी समझ दी है। हालाँकि हो सकता है कि आप यहाँ चर्चा की गई सभी सुविधाओं का उपयोग न करें। फिर भी यह शानदार है कि आप उनके बारे में जानते हैं। यदि आपको भविष्य में कभी भी इसी तरह की कार्यक्षमता को शामिल करने की आवश्यकता महसूस होती है, तो आप जानते हैं कि कहां देखना है। इसलिए, आसान संदर्भ के लिए इस पोस्ट को सहेजना या बुकमार्क करना सुनिश्चित करें। और याद रखें, यदि आपके कोई प्रश्न हैं या आपको अतिरिक्त सहायता की आवश्यकता है, तो बेझिझक ट्विटर पर मुझसे संपर्क करें। मैं मदद के लिए यहाँ हूँ!