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

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

import { useHistory } from "react-router-dom";

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

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

ರಿಯಾಕ್ಟ್ ರೂಟರ್ ಡೊಮ್

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

ರಿಯಾಕ್ಟ್-ರೂಟರ್-ಡೊಮ್‌ನಲ್ಲಿ ನ್ಯಾವಿಗೇಟ್ ಮೂಲಕ ನೀವು ಡೇಟಾವನ್ನು ಹೇಗೆ ರವಾನಿಸುತ್ತೀರಿ

ರಿಯಾಕ್ಟ್ ರೂಟರ್‌ನಲ್ಲಿ, ಇತಿಹಾಸ API ಯ ಸ್ಟೇಟ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನ್ಯಾವಿಗೇಷನ್ ಮೂಲಕ ಡೇಟಾವನ್ನು ರವಾನಿಸಬಹುದು. ರಾಜ್ಯದ ವಸ್ತುವನ್ನು a ಮೂಲಕ ಸಲ್ಲಿಸಿದ ಯಾವುದೇ ಘಟಕದ ಆಧಾರಗಳ ಮೂಲಕ ಪ್ರವೇಶಿಸಬಹುದು ಘಟಕ. ಡೇಟಾವನ್ನು ರವಾನಿಸಲು, ನ್ಯಾವಿಗೇಟ್ ಕಾರ್ಯವನ್ನು ಕರೆಯುವಾಗ ನೀವು ಅದನ್ನು ರಾಜ್ಯದ ವಸ್ತುವಿಗೆ ಸೇರಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ:

const {ಇತಿಹಾಸ } = this.props;
history.push({
ಮಾರ್ಗದ ಹೆಸರು: '/ಕೆಲವು/ಮಾರ್ಗ',
ರಾಜ್ಯ: {ಕೆಲವು ಡೇಟಾ: 'ಡೇಟಾ'}
});