हल किया गया: डेटा पास करें नेविगेट राउटर डोम पर प्रतिक्रिया करें

रिएक्ट राउटर डोम के साथ नेविगेट करते समय डेटा पास करने से संबंधित मुख्य समस्या यह है कि डेटा को URL क्वेरी स्ट्रिंग में पास किया जाना चाहिए। इसका मतलब है कि किसी भी संवेदनशील जानकारी को पारित करने से पहले एन्कोड किया जाना चाहिए, क्योंकि यह यूआरएल में दिखाई देगी। इसके अतिरिक्त, यदि डेटा बहुत बड़ा है, तो यह URL की अधिकतम लंबाई से अधिक हो सकता है और त्रुटियाँ उत्पन्न कर सकता है। अंत में, यदि आप किसी एप्लिकेशन के भीतर पृष्ठों के बीच नेविगेट करने के लिए रिएक्ट राउटर डोम का उपयोग कर रहे हैं, तो आपको मैन्युअल रूप से स्थिति का प्रबंधन करना होगा और यह सुनिश्चित करने के लिए परिवर्तनों का ट्रैक रखना होगा कि सभी घटकों की समान डेटा तक पहुंच हो।

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: यह पंक्ति MyComponent नामक एक स्थिरांक की घोषणा करती है जो एक ऐसा कार्य है जो JSX को लौटाता है।
// पंक्ति 4: यह पंक्ति एक निरंतर इतिहास की घोषणा करती है जिसे प्रतिक्रिया-राउटर-डोम से आयात किए गए यूज़हिस्ट्री हुक को सौंपा गया है।
// लाइन 6: यह लाइन हैंडलक्लिक नामक एक फ़ंक्शन की घोषणा करती है जो एक पैरामीटर, डेटा में लेता है।
// लाइन 7: यह लाइन पथनाम '/myroute' के साथ स्टैक पर एक नया मार्ग पुश करने के लिए इतिहास ऑब्जेक्ट का उपयोग करती है और ऑब्जेक्ट के रूप में पारित राज्य डेटा।
// लाइन्स 9 - 11: ये लाइनें JSX को ऑनक्लिक इवेंट हैंडलर के साथ एक बटन तत्व से युक्त करती हैं, जो हैंडलक्लिक को कॉल करता है और एक तर्क के रूप में डेटा में पास करता है।

रिएक्ट राउटर डोम

रिएक्ट राउटर डोम रिएक्ट के लिए एक रूटिंग लाइब्रेरी है जो डेवलपर्स को उनके रिएक्ट एप्लिकेशन के भीतर रूट बनाने और प्रबंधित करने की अनुमति देता है। यह रिएक्ट के साथ जटिल, बहु-पृष्ठ वेब एप्लिकेशन बनाने के लिए आवश्यक मुख्य घटक प्रदान करता है, जिसमें लिंक, रूट, स्विच और ब्राउज़र राउटर जैसे घटक शामिल हैं। यह डायनेमिक रूट मैचिंग और लोकेशन ट्रैकिंग जैसी सुविधाएँ भी प्रदान करता है। रिएक्ट राउटर डोम के साथ, डेवलपर्स आसानी से URL या ब्राउज़र इतिहास को मैन्युअल रूप से प्रबंधित किए बिना कई दृश्यों और मार्गों के साथ सिंगल पेज एप्लिकेशन बना सकते हैं।

आप प्रतिक्रिया-राउटर-डोम में नेविगेट के माध्यम से डेटा कैसे पास करते हैं

रिएक्ट राउटर में, इतिहास एपीआई के राज्य वस्तु का उपयोग करके डेटा को नेविगेशन के माध्यम से पारित किया जा सकता है। राज्य वस्तु किसी भी घटक द्वारा प्रदान किए गए प्रोप के माध्यम से सुलभ है अवयव। डेटा पास करने के लिए, नेविगेट फ़ंक्शन को कॉल करते समय आप इसे स्टेट ऑब्जेक्ट में जोड़ सकते हैं। उदाहरण के लिए:

const {इतिहास} = this.props;
इतिहास.धक्का({
पथनाम: '/ कुछ/पथ',
राज्य: {कुछ डेटा: 'डेटा'}
});

संबंधित पोस्ट:

एक टिप्पणी छोड़ दो