हल किया गया: सक्रिय क्लासनाम प्रतिक्रिया राउटर

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

<Router>
  <Link to="/about" activeClassName="active">About</Link>
</Router>

1. घटक का उपयोग प्रतिक्रिया में राउटर बनाने के लिए किया जाता है जो उपयोगकर्ताओं को विभिन्न पृष्ठों के बीच नेविगेट करने की अनुमति देता है।

2. घटक का उपयोग एक लिंक बनाने के लिए किया जाता है, जिस पर क्लिक करने पर, उपयोगकर्ता को "टू" विशेषता (इस मामले में, "/ के बारे में") में निर्दिष्ट पृष्ठ पर ले जाया जाएगा।

3. सक्रिय क्लासनाम विशेषता निर्दिष्ट करती है कि लिंक सक्रिय होने पर कौन सी कक्षा लागू की जानी चाहिए (इस मामले में, "सक्रिय")।

नवलिंक क्या है

NavLink एक रिएक्ट घटक है जिसका उपयोग रिएक्ट राउटर में एक एप्लिकेशन में विभिन्न मार्गों के बीच एक नेविगेशन लिंक बनाने के लिए किया जाता है। यह लिंक घटक के समान है, लेकिन जब यह वर्तमान URL से मेल खाता है तो यह रेंडर किए गए तत्व में स्टाइल विशेषताएँ जोड़ता है। NavLink एक सक्रिय क्लासनाम प्रोप भी प्रदान करता है जिसका उपयोग लिंक के मार्ग सक्रिय होने पर कक्षा के नाम को लागू करने के लिए किया जा सकता है।

सक्रिय क्लासनाम विशेषता

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

सक्रिय क्लासनाम क्यों काम नहीं करेगा

ActiveClassName रिएक्ट राउटर की एक विशेषता है जो आपको नेविगेशन मेनू में सक्रिय लिंक में एक वर्ग जोड़ने की अनुमति देता है। दुर्भाग्य से, यह रिएक्ट राउटर में काम नहीं करेगा क्योंकि यह ब्राउज़र के इतिहास एपीआई पर निर्भर करता है, जो कि रिएक्ट राउटर में उपलब्ध नहीं है। इसका मतलब यह है कि रिएक्ट राउटर यह पता नहीं लगा सकता है कि उपयोगकर्ता ने किसी लिंक पर कब क्लिक किया है और उसके अनुसार एक्टिवक्लासनाम लागू कर सकता है।