React Router मधील ActiveClassName शी संबंधित मुख्य समस्या ही आहे की जेव्हा मार्ग बदलतो तेव्हा ते सक्रिय वर्ग आपोआप अपडेट होत नाही. याचा अर्थ असा की जेव्हा जेव्हा मार्ग बदलतो तेव्हा विकासकांनी सक्रिय वर्ग व्यक्तिचलितपणे अद्यतनित करणे आवश्यक आहे, जे वेळ घेणारे आणि त्रुटी-प्रवण असू शकते. याव्यतिरिक्त, जर अनेक मार्ग एकमेकांमध्ये नेस्ट केलेले असतील तर, सध्या कोणता मार्ग सक्रिय आहे आणि प्रत्येक घटकावर कोणते वर्ग लागू केले जावेत याचा मागोवा ठेवणे कठीण होऊ शकते.
<Router> <Link to="/about" activeClassName="active">About</Link> </Router>
1 द
2 द घटक दुवा तयार करण्यासाठी वापरला जातो ज्यावर क्लिक केल्यावर, वापरकर्त्यास “to” विशेषता मध्ये निर्दिष्ट केलेल्या पृष्ठावर नेले जाईल (या प्रकरणात, “/बद्दल”).
3. ActiveClassName विशेषता लिंक सक्रिय असताना कोणता वर्ग लागू करावा हे निर्दिष्ट करते (या प्रकरणात, "सक्रिय").
NavLink काय आहे
NavLink हा React घटक आहे जो ऍप्लिकेशनमधील विविध मार्गांदरम्यान नेव्हिगेशन लिंक तयार करण्यासाठी React राउटरमध्ये वापरला जातो. हे लिंक घटकासारखेच आहे, परंतु जेव्हा ते वर्तमान URL शी जुळते तेव्हा प्रस्तुत घटकामध्ये शैली गुणधर्म जोडते. NavLink एक ActiveClassName प्रोप देखील प्रदान करते ज्याचा वापर लिंकचा मार्ग सक्रिय असताना वर्ग नाव लागू करण्यासाठी केला जाऊ शकतो.
ActiveClassName विशेषता
React Router मधील ActiveClassName विशेषता वर्गाचे नाव निर्दिष्ट करण्यासाठी वापरली जाते जे घटकावर लागू केले जाईल जेव्हा ते वर्तमान URL शी जुळते. जेव्हा ते वर्तमान मार्गाशी जुळतात तेव्हा लिंक्स किंवा नेव्हिगेशन आयटम स्टाइल करण्यासाठी हे उपयुक्त आहे. हे थेट राउटिंगशी संबंधित नसलेल्या घटकांमध्ये अतिरिक्त शैली जोडण्यासाठी देखील वापरले जाऊ शकते, जसे की नेव्हिगेशन बारमध्ये सध्या सक्रिय टॅब हायलाइट करणे.
ActiveClassName का काम करत नाही
ActiveClassName हे रिअॅक्ट राउटरचे वैशिष्ट्य आहे जे तुम्हाला नेव्हिगेशन मेनूमधील सक्रिय लिंकमध्ये वर्ग जोडण्याची परवानगी देते. दुर्दैवाने, ते React राउटरमध्ये कार्य करणार नाही कारण ते ब्राउझरच्या इतिहास API वर अवलंबून आहे, जे React राउटरमध्ये उपलब्ध नाही. याचा अर्थ असा की वापरकर्त्याने दुव्यावर क्लिक केल्यावर प्रतिक्रिया राउटर शोधू शकत नाही आणि त्यानुसार ActiveClassName लागू करा.
