ரியாக்ட் ரூட்டரில் ActiveClassName தொடர்பான முக்கிய பிரச்சனை என்னவென்றால், பாதை மாறும்போது அது செயலில் உள்ள வகுப்பை தானாகவே புதுப்பிக்காது. இதன் பொருள் டெவலப்பர்கள் ஒரு வழி மாறும்போதெல்லாம் செயலில் உள்ள வகுப்பை கைமுறையாகப் புதுப்பிக்க வேண்டும், இது நேரத்தைச் செலவழிக்கும் மற்றும் பிழை ஏற்படக்கூடியதாக இருக்கலாம். கூடுதலாக, பல வழிகள் ஒன்றுக்கொன்று உள்ளமைக்கப்பட்டிருந்தால், எந்த வழி தற்போது செயலில் உள்ளது மற்றும் ஒவ்வொரு உறுப்புக்கும் என்ன வகுப்புகள் பயன்படுத்தப்பட வேண்டும் என்பதைக் கண்காணிப்பது கடினமாகிவிடும்.
<Router> <Link to="/about" activeClassName="active">About</Link> </Router>
1. தி
2. தி சொடுக்கும் போது, "to" பண்புக்கூறில் (இந்த வழக்கில், "/about") குறிப்பிடப்பட்ட பக்கத்திற்கு பயனரை அழைத்துச் செல்லும் இணைப்பை உருவாக்க கூறு பயன்படுத்தப்படுகிறது.
3. ActiveClassName பண்புக்கூறானது இணைப்பு செயலில் இருக்கும்போது எந்த வகுப்பைப் பயன்படுத்த வேண்டும் என்பதைக் குறிப்பிடுகிறது (இந்த விஷயத்தில், "செயலில்").
NavLink என்றால் என்ன
NavLink என்பது ஒரு பயன்பாட்டில் வெவ்வேறு வழிகளுக்கு இடையே வழிசெலுத்தல் இணைப்பை உருவாக்க ரியாக்ட் ரூட்டரில் பயன்படுத்தப்படும் ஒரு எதிர்வினை கூறு ஆகும். இது இணைப்பு கூறுகளைப் போலவே உள்ளது, ஆனால் தற்போதைய URL உடன் பொருந்தும்போது, ரெண்டர் செய்யப்பட்ட உறுப்புக்கு ஸ்டைலிங் பண்புகளைச் சேர்க்கிறது. NavLink ஆனது ஆக்டிவ் கிளாஸ்நேம் ப்ராப்பையும் வழங்குகிறது, இது இணைப்பின் வழி செயலில் இருக்கும்போது வகுப்பு பெயரைப் பயன்படுத்தப் பயன்படுகிறது.
ActiveClassName பண்புக்கூறு
ரியாக்ட் ரூட்டரில் உள்ள ActiveClassName பண்புக்கூறானது, தற்போதைய URL உடன் பொருந்தும்போது உறுப்புக்குப் பயன்படுத்தப்படும் வர்க்கப் பெயரைக் குறிப்பிடப் பயன்படுகிறது. தற்போதைய பாதையுடன் பொருந்தும்போது இணைப்புகள் அல்லது வழிசெலுத்தல் உருப்படிகளை வடிவமைக்க இது பயனுள்ளதாக இருக்கும். வழிசெலுத்தல் பட்டியில் தற்போது செயலில் உள்ள தாவலைத் தனிப்படுத்துவது போன்ற ரூட்டிங் உடன் நேரடியாக தொடர்பில்லாத உறுப்புகளுக்கு கூடுதல் ஸ்டைலிங் சேர்க்க இது பயன்படுத்தப்படலாம்.
ActiveClassName ஏன் வேலை செய்யாது
ActiveClassName என்பது ரியாக்ட் ரூட்டரின் அம்சமாகும், இது வழிசெலுத்தல் மெனுவில் செயலில் உள்ள இணைப்பில் ஒரு வகுப்பைச் சேர்க்க உங்களை அனுமதிக்கிறது. துரதிர்ஷ்டவசமாக, இது ரியாக்ட் ரூட்டரில் வேலை செய்யாது, ஏனெனில் இது உலாவியின் வரலாற்று API ஐ நம்பியுள்ளது, இது ரியாக்ட் ரூட்டரில் இல்லை. அதாவது, ஒரு பயனர் இணைப்பைக் கிளிக் செய்து, அதற்கேற்ப ActiveClassName ஐப் பயன்படுத்தும்போது, React Router ஆல் கண்டறிய முடியாது.
