ಪರಿಹರಿಸಲಾಗಿದೆ: ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಮುಂದಿನ ಪುಟದ ಮೇಲ್ಭಾಗ

ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನ ಮುಂದಿನ ಪುಟದ ಮೇಲ್ಭಾಗಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಮುಖ್ಯ ಸಮಸ್ಯೆಯೆಂದರೆ, ಪುಟಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ ಇದು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಯನ್ನು ಉಂಟುಮಾಡಬಹುದು. ಹೊಸ ಪುಟಕ್ಕೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ, ಬ್ರೌಸರ್ ಪುಟದ ಮೇಲ್ಭಾಗಕ್ಕೆ ಹಿಂತಿರುಗುತ್ತದೆ, ಅದೇ ಪುಟದಲ್ಲಿ ಉಳಿಯಲು ಅಥವಾ ಮತ್ತಷ್ಟು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಲು ನಿರೀಕ್ಷಿಸುತ್ತಿರುವ ಬಳಕೆದಾರರಿಗೆ ಇದು ಜರ್ರಿಂಗ್ ಆಗಿರಬಹುದು. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಹೆಚ್ಚು ಸಾಂಪ್ರದಾಯಿಕ ವೆಬ್ ನ್ಯಾವಿಗೇಷನ್ ಮಾದರಿಗಳಿಗೆ ಬಳಸುವ ಬಳಕೆದಾರರಿಂದ ಈ ನಡವಳಿಕೆಯನ್ನು ನಿರೀಕ್ಷಿಸಲಾಗುವುದಿಲ್ಲ.

import { useRouter } from 'react-router-dom';

const NextPage = () => {
  const router = useRouter();

  const handleClick = () => {
    router.push('/next-page');
  };

  return (
    <div>
      <button onClick={handleClick}>Go to next page</button>
    </div>  
  );  
};

// ಲೈನ್ 1: ಈ ಸಾಲು ರಿಯಾಕ್ಟ್-ರೂಟರ್-ಡಾಮ್ ಲೈಬ್ರರಿಯಿಂದ ಯೂಸ್ ರೂಟರ್ ಹುಕ್ ಅನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುತ್ತದೆ.
// ಸಾಲು 3: ಈ ಸಾಲು NextPage ಎಂಬ ಕಾರ್ಯವನ್ನು ಘೋಷಿಸುತ್ತದೆ ಅದು ರಿಯಾಕ್ಟ್ ಘಟಕವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
// ಸಾಲು 4: ಈ ಸಾಲು ರೂಟರ್ ಎಂಬ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಘೋಷಿಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಯೂಸ್ ರೂಟರ್ ಹುಕ್‌ಗೆ ನಿಯೋಜಿಸುತ್ತದೆ.
// ಸಾಲು 6: ಈ ಸಾಲು ಹ್ಯಾಂಡಲ್‌ಕ್ಲಿಕ್ ಎಂಬ ಕಾರ್ಯವನ್ನು ಘೋಷಿಸುತ್ತದೆ, ಇದು ರೂಟರ್‌ನ ಪುಶ್ ವಿಧಾನವನ್ನು '/ಮುಂದಿನ ಪುಟ' ವಾದದೊಂದಿಗೆ ಕರೆಯುತ್ತದೆ.
// ಸಾಲುಗಳು 8-11: ಈ ಸಾಲುಗಳು ಹ್ಯಾಂಡಲ್‌ಕ್ಲಿಕ್‌ಗೆ ಆನ್‌ಕ್ಲಿಕ್ ಪ್ರಾಪ್ ಅನ್ನು ಹೊಂದಿರುವ ಬಟನ್ ಅಂಶದೊಂದಿಗೆ ರಿಯಾಕ್ಟ್ ಘಟಕವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತವೆ. ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಇದು ಹ್ಯಾಂಡಲ್‌ಕ್ಲಿಕ್ ಕಾರ್ಯಕ್ಕೆ ಕರೆ ಮಾಡುತ್ತದೆ ಮತ್ತು '/ಮುಂದಿನ-ಪುಟ' ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುತ್ತದೆ.

ಪುಟಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿ

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

ScrollToTop ಅಥವಾ ಮುಂದಿನ ಪುಟದ ಮೇಲ್ಭಾಗ

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