ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಇತಿಹಾಸದಲ್ಲಿ ಡೇಟಾವನ್ನು ರವಾನಿಸಲು ಸಂಬಂಧಿಸಿದ ಮುಖ್ಯ ಸಮಸ್ಯೆ, ಪುಶ್ ಪುಟದ ರಿಫ್ರೆಶ್‌ಗಳಾದ್ಯಂತ ಡೇಟಾ ಮುಂದುವರಿಯುವುದಿಲ್ಲ. ಬಳಕೆದಾರರು ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿದಾಗ, history.push ನಲ್ಲಿ ಸಂಗ್ರಹವಾಗಿರುವ ಡೇಟಾ ಕಳೆದುಹೋಗುತ್ತದೆ ಮತ್ತು ನಂತರದ ಪುಟ ಲೋಡ್‌ಗಳಲ್ಲಿ ಬಳಕೆಗೆ ಲಭ್ಯವಿರುವುದಿಲ್ಲ. ಇದು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು ಮತ್ತು ಹಿಂದಿನ ಪುಟದ ಲೋಡ್‌ನಿಂದ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸಲು ಅಥವಾ ಸಂಗ್ರಹಿಸಲು ಪ್ರಯತ್ನಿಸುವಾಗ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು.
import { useHistory } from "react-router-dom";
const MyComponent = () => {
const history = useHistory();
const handleClick = (data) => {
history.push({ pathname: "/mypage", state: data });
};
return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};
1. ಈ ಸಾಲು ರಿಯಾಕ್ಟ್-ರೂಟರ್-ಡಾಮ್ ಲೈಬ್ರರಿಯಿಂದ ಯೂಸ್ ಹಿಸ್ಟರಿ ಹುಕ್ ಅನ್ನು ಆಮದು ಮಾಡುತ್ತದೆ, ಇದು ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಪ್ರಸ್ತುತ ಸ್ಥಳವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವ ಇತಿಹಾಸ ವಸ್ತುವಿಗೆ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತದೆ.
2. ಈ ಸಾಲು MyComponent ಎಂಬ ಕ್ರಿಯಾತ್ಮಕ ಘಟಕವನ್ನು ಘೋಷಿಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಸ್ಥಿರ ವೇರಿಯಬಲ್ಗೆ ನಿಯೋಜಿಸುತ್ತದೆ.
3. ಈ ಸಾಲು ಇತಿಹಾಸದ ವಸ್ತುವಿಗೆ ಪ್ರವೇಶ ಪಡೆಯಲು ಮತ್ತು ಇತಿಹಾಸ ಎಂಬ ಸ್ಥಿರ ವೇರಿಯಬಲ್ಗೆ ನಿಯೋಜಿಸಲು ಸಾಲು 1 ರಲ್ಲಿ ಆಮದು ಮಾಡಲಾದ useHistory ಹುಕ್ ಅನ್ನು ಬಳಸುತ್ತದೆ.
4. ಈ ಸಾಲು ಹ್ಯಾಂಡಲ್‌ಕ್ಲಿಕ್ ಎಂಬ ಕಾರ್ಯವನ್ನು ಘೋಷಿಸುತ್ತದೆ, ಅದು ಡೇಟಾ ಎಂಬ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಇತಿಹಾಸದ ಸ್ಟಾಕ್‌ನಲ್ಲಿ ಇತಿಹಾಸದ ಸ್ಟಾಕ್‌ನಲ್ಲಿ ಇತಿಹಾಸ.push() ಅನ್ನು ತಳ್ಳುವ ವಸ್ತುವನ್ನು ತಳ್ಳುತ್ತದೆ.
5. ಈ ಸಾಲು ಆನ್‌ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ನೊಂದಿಗೆ ಬಟನ್ ಅಂಶವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಅದು ಬಳಕೆದಾರರಿಂದ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅದರ ಆರ್ಗ್ಯುಮೆಂಟ್‌ನಂತೆ ಕೆಲವು ಡೇಟಾ ಹೊಂದಿರುವ ವಸ್ತುವಿನೊಂದಿಗೆ ಹ್ಯಾಂಡಲ್‌ಕ್ಲಿಕ್() ಅನ್ನು ಕರೆಯುತ್ತದೆ.
ಇತಿಹಾಸ ಪುಶ್
ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿ ಹಿಸ್ಟರಿ ಪುಶ್ ಎನ್ನುವುದು ಪುಟ ರಿಫ್ರೆಶ್‌ಗೆ ಕಾರಣವಾಗದೆ ಬ್ರೌಸರ್‌ನಲ್ಲಿನ URL ಅನ್ನು ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್‌ನಲ್ಲಿ ಬದಲಾಯಿಸಲು ಬಳಸುವ ಒಂದು ವಿಧಾನವಾಗಿದೆ. ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ಆಳವಾದ ಲಿಂಕ್ ಮಾಡುವಿಕೆಯನ್ನು ನಿಭಾಯಿಸಲು ಸಾಧ್ಯವಾಗುವ ಏಕ-ಪುಟ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಇದು ಅನುಮತಿಸುತ್ತದೆ. ಬ್ರೌಸರ್‌ನ ಇತಿಹಾಸ API ಅನ್ನು ಬಳಸಿಕೊಂಡು ಇತಿಹಾಸ ಪುಶ್ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡದೆಯೇ ಪ್ರಸ್ತುತ URL ಅನ್ನು ಮ್ಯಾನಿಪುಲೇಟ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಪ್ರತಿ ಬಾರಿ ಮರುಲೋಡ್ ಮಾಡದೆಯೇ ಅಪ್ಲಿಕೇಶನ್‌ನ ವಿವಿಧ ಪುಟಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಬಳಕೆದಾರರಿಗೆ ಇದು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಇದನ್ನು ಆಳವಾದ ಲಿಂಕ್ ಮಾಡಲು ಬಳಸಬಹುದು, ಅಪ್ಲಿಕೇಶನ್‌ನ ನಿರ್ದಿಷ್ಟ ಭಾಗಗಳಿಗೆ ನೇರವಾಗಿ ಲಿಂಕ್ ಮಾಡಲು ಬಳಕೆದಾರರಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ.
ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿ ನಾನು ಇತಿಹಾಸವನ್ನು ಹೇಗೆ ಬಳಸುವುದು
ರಿಯಾಕ್ಟ್ ರೂಟರ್ ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಇತಿಹಾಸವನ್ನು ಬಳಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇತಿಹಾಸವು ಪ್ರಸ್ತುತ ಪುಟವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಹಾಗೆಯೇ ಭೇಟಿ ನೀಡಿದ ಯಾವುದೇ ಹಿಂದಿನ ಪುಟಗಳನ್ನು. ನ್ಯಾವಿಗೇಷನ್ ರಚಿಸಲು ಮತ್ತು ಬಳಕೆದಾರರ ಕ್ರಿಯೆಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿ ಇತಿಹಾಸವನ್ನು ಬಳಸಲು, ನೀವು ಇತಿಹಾಸ ಪ್ಯಾಕೇಜ್‌ನಿಂದ createHistory() ವಿಧಾನವನ್ನು ಬಳಸಿಕೊಂಡು ಇತಿಹಾಸ ವಸ್ತುವನ್ನು ರಚಿಸಬೇಕಾಗಿದೆ. ಇದು ನಿಮಗೆ ಪುಶ್(), ರಿಪ್ಲೇಸ್(), ಮತ್ತು ಗೋ() ನಂತಹ ವಿಧಾನಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ನೀಡುತ್ತದೆ. ಈ ವಿಧಾನಗಳು ಬ್ರೌಸರ್‌ನ URL ಅನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ವಿವಿಧ ಮಾರ್ಗಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. URL ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳನ್ನು ಆಲಿಸಲು ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನವೀಕರಿಸಲು ನೀವು ಆಲಿಸಿ() ವಿಧಾನವನ್ನು ಸಹ ಬಳಸಬಹುದು.
ಒಮ್ಮೆ ನೀವು ಇತಿಹಾಸ ವಸ್ತುವನ್ನು ರಚಿಸಿದ ನಂತರ, ಅದನ್ನು ರಚಿಸುವಾಗ ನೀವು ಅದನ್ನು ನಿಮ್ಮ ರೂಟರ್ ಘಟಕಕ್ಕೆ ರವಾನಿಸಬಹುದು. ಇದು ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಅನ್ನು ಬಳಕೆದಾರರು ಮಾಡಿದ ಎಲ್ಲಾ ಬದಲಾವಣೆಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ನವೀಕರಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನೊಂದಿಗೆ ಇತಿಹಾಸವನ್ನು ಬಳಸುವುದರಿಂದ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಪ್ರಬಲ ನ್ಯಾವಿಗೇಷನ್ ಘಟಕಗಳನ್ನು ರಚಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ, ಅದು ಬಳಕೆದಾರರಿಗೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಸಂವಹನ ಮಾಡಲು ಸುಲಭವಾಗುತ್ತದೆ.
