ಪರಿಹರಿಸಲಾಗಿದೆ: ActiveClassName ರಿಯಾಕ್ಟ್ ರೂಟರ್

ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿ ಸಕ್ರಿಯಕ್ಲಾಸ್‌ನೇಮ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ಮುಖ್ಯ ಸಮಸ್ಯೆಯೆಂದರೆ, ಮಾರ್ಗವು ಬದಲಾದಾಗ ಅದು ಸಕ್ರಿಯ ವರ್ಗವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸುವುದಿಲ್ಲ. ಇದರರ್ಥ ಡೆವಲಪರ್‌ಗಳು ಮಾರ್ಗವು ಬದಲಾದಾಗಲೆಲ್ಲಾ ಸಕ್ರಿಯ ವರ್ಗವನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ನವೀಕರಿಸಬೇಕು, ಇದು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ದೋಷ ಪೀಡಿತವಾಗಿರುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಬಹು ಮಾರ್ಗಗಳು ಒಂದರೊಳಗೆ ಗೂಡುಕಟ್ಟಿದ್ದರೆ, ಯಾವ ಮಾರ್ಗವು ಪ್ರಸ್ತುತ ಸಕ್ರಿಯವಾಗಿದೆ ಮತ್ತು ಪ್ರತಿಯೊಂದು ಅಂಶಕ್ಕೆ ಯಾವ ವರ್ಗಗಳನ್ನು ಅನ್ವಯಿಸಬೇಕು ಎಂಬುದರ ಕುರಿತು ನಿಗಾ ಇಡಲು ಕಷ್ಟವಾಗಬಹುದು.

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

1. ದಿ ವಿಭಿನ್ನ ಪುಟಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಬಳಕೆದಾರರನ್ನು ಅನುಮತಿಸುವ ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ರೂಟರ್ ಅನ್ನು ರಚಿಸಲು ಘಟಕವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.

2. ದಿ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಬಳಕೆದಾರರನ್ನು "ಟು" ಗುಣಲಕ್ಷಣದಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಪುಟಕ್ಕೆ ಕರೆದೊಯ್ಯುವ ಲಿಂಕ್ ಅನ್ನು ರಚಿಸಲು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ (ಈ ಸಂದರ್ಭದಲ್ಲಿ, "/ಬಗ್ಗೆ").

3. ActiveClassName ಗುಣಲಕ್ಷಣವು ಲಿಂಕ್ ಸಕ್ರಿಯವಾಗಿರುವಾಗ ಯಾವ ವರ್ಗವನ್ನು ಅನ್ವಯಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ (ಈ ಸಂದರ್ಭದಲ್ಲಿ, "ಸಕ್ರಿಯ").

NavLink ಎಂದರೇನು

NavLink ಎನ್ನುವುದು ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ವಿವಿಧ ಮಾರ್ಗಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಷನ್ ಲಿಂಕ್ ಅನ್ನು ರಚಿಸಲು ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿ ಬಳಸಲಾಗುವ ರಿಯಾಕ್ಟ್ ಘಟಕವಾಗಿದೆ. ಇದು ಲಿಂಕ್ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಹೋಲುತ್ತದೆ, ಆದರೆ ಪ್ರಸ್ತುತ URL ಗೆ ಹೊಂದಿಕೆಯಾದಾಗ ರೆಂಡರ್ ಮಾಡಲಾದ ಅಂಶಕ್ಕೆ ಸ್ಟೈಲಿಂಗ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ. NavLink ಸಹ ಸಕ್ರಿಯಕ್ಲಾಸ್‌ನೇಮ್ ಪ್ರಾಪ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದನ್ನು ಲಿಂಕ್‌ನ ಮಾರ್ಗವು ಸಕ್ರಿಯವಾಗಿರುವಾಗ ವರ್ಗದ ಹೆಸರನ್ನು ಅನ್ವಯಿಸಲು ಬಳಸಬಹುದು.

ಸಕ್ರಿಯಕ್ಲಾಸ್ಹೆಸರು ಗುಣಲಕ್ಷಣ

ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿರುವ ಸಕ್ರಿಯಕ್ಲಾಸ್‌ನೇಮ್ ಗುಣಲಕ್ಷಣವನ್ನು ಪ್ರಸ್ತುತ URL ಗೆ ಹೊಂದಿಕೆಯಾದಾಗ ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸುವ ವರ್ಗ ಹೆಸರನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಪ್ರಸ್ತುತ ಮಾರ್ಗಕ್ಕೆ ಹೊಂದಿಕೆಯಾದಾಗ ಲಿಂಕ್‌ಗಳು ಅಥವಾ ನ್ಯಾವಿಗೇಷನ್ ಐಟಂಗಳನ್ನು ಸ್ಟೈಲಿಂಗ್ ಮಾಡಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್‌ನಲ್ಲಿ ಪ್ರಸ್ತುತ ಸಕ್ರಿಯವಾಗಿರುವ ಟ್ಯಾಬ್ ಅನ್ನು ಹೈಲೈಟ್ ಮಾಡುವಂತಹ ರೂಟಿಂಗ್‌ಗೆ ನೇರವಾಗಿ ಸಂಬಂಧಿಸದ ಅಂಶಗಳಿಗೆ ಹೆಚ್ಚುವರಿ ಶೈಲಿಯನ್ನು ಸೇರಿಸಲು ಸಹ ಇದನ್ನು ಬಳಸಬಹುದು.

ActiveClassName ಏಕೆ ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ

ActiveClassName ಎಂಬುದು ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವಿನಲ್ಲಿ ಸಕ್ರಿಯ ಲಿಂಕ್‌ಗೆ ವರ್ಗವನ್ನು ಸೇರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ. ದುರದೃಷ್ಟವಶಾತ್, ಇದು ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಇದು ಬ್ರೌಸರ್‌ನ ಇತಿಹಾಸ API ಅನ್ನು ಅವಲಂಬಿಸಿದೆ, ಇದು ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲ. ಇದರರ್ಥ ಬಳಕೆದಾರರು ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಪತ್ತೆಹಚ್ಚಲು ಸಾಧ್ಯವಿಲ್ಲ ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಸಕ್ರಿಯಕ್ಲಾಸ್ ಹೆಸರನ್ನು ಅನ್ವಯಿಸಿ.

ಸಂಬಂಧಿತ ಪೋಸ್ಟ್ಗಳು:

ಒಂದು ಕಮೆಂಟನ್ನು ಬಿಡಿ