रिएक्ट राउटर हिस्ट्री, पुश में डेटा पास करने से जुड़ी मुख्य समस्या यह है कि डेटा पेज रिफ्रेश के दौरान बना नहीं रहता है। जब कोई उपयोगकर्ता पृष्ठ को ताज़ा करता है, तो 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 में इम्पोर्टेड यूज हिस्ट्री हुक का उपयोग करती है और इसे हिस्ट्री नामक एक स्थिर वैरिएबल को असाइन करती है।
4. यह लाइन हैंडलक्लिक नामक एक फ़ंक्शन की घोषणा करती है जो डेटा नामक एक तर्क लेता है और हिस्ट्री.पुश () का उपयोग करके पथनाम और राज्य गुणों वाले ऑब्जेक्ट को इतिहास स्टैक पर धकेलता है।
5. यह लाइन एक ऑनक्लिक ईवेंट हैंडलर के साथ एक बटन तत्व लौटाती है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर इसके तर्क के रूप में someData वाले ऑब्जेक्ट के साथ हैंडलक्लिक () को कॉल करता है।
इतिहास धक्का
रिएक्ट राउटर में हिस्ट्री पुश एक ऐसी विधि है जिसका उपयोग पेज को रिफ्रेश किए बिना ब्राउजर में URL को प्रोग्रामेटिक रूप से बदलने के लिए किया जाता है। यह डेवलपर्स को सिंगल-पेज एप्लिकेशन बनाने की अनुमति देता है जो अभी भी नेविगेशन और डीप लिंकिंग को संभालने में सक्षम हैं। हिस्ट्री पुश ब्राउजर के हिस्ट्री एपीआई का उपयोग करके काम करता है, जो डेवलपर्स को पेज को फिर से लोड किए बिना वर्तमान URL में हेरफेर करने की अनुमति देता है। यह उपयोगकर्ताओं के लिए हर बार पुनः लोड किए बिना किसी एप्लिकेशन के विभिन्न पृष्ठों के बीच नेविगेट करना संभव बनाता है। इसके अतिरिक्त, इसका उपयोग डीप लिंकिंग के लिए किया जा सकता है, जिससे उपयोगकर्ता किसी एप्लिकेशन के विशिष्ट भागों में सीधे लिंक कर सकते हैं।
मैं प्रतिक्रिया राउटर में इतिहास का उपयोग कैसे करूं?
रिएक्ट राउटर आपके रिएक्ट एप्लिकेशन में इतिहास का उपयोग करने का एक तरीका प्रदान करता है। इतिहास आपको वर्तमान पृष्ठ के साथ-साथ पिछले विज़िट किए गए किसी भी पृष्ठ का ट्रैक रखने की अनुमति देता है। यह नेविगेशन बनाने और उपयोगकर्ता की गतिविधियों पर नज़र रखने के लिए उपयोगी है।
रिएक्ट राउटर में इतिहास का उपयोग करने के लिए, आपको इतिहास पैकेज से createHistory () विधि का उपयोग करके एक इतिहास वस्तु बनाने की आवश्यकता है। यह आपको पुश (), रिप्लेस (), और गो () जैसे तरीकों तक पहुंच प्रदान करेगा। ये विधियाँ आपको ब्राउज़र के URL में हेरफेर करने और आपके एप्लिकेशन में विभिन्न मार्गों के बीच नेविगेट करने की अनुमति देती हैं। आप URL में परिवर्तनों को सुनने और तदनुसार अपने एप्लिकेशन को अपडेट करने के लिए सुनो () विधि का भी उपयोग कर सकते हैं।
एक बार जब आप एक इतिहास वस्तु बना लेते हैं, तो आप इसे बनाते समय अपने राउटर घटक में पास कर सकते हैं। यह रिएक्ट राउटर को उपयोगकर्ताओं द्वारा किए गए सभी परिवर्तनों पर नज़र रखने और तदनुसार अपडेट करने की अनुमति देगा।
रिएक्ट राउटर के साथ इतिहास का उपयोग करने से डेवलपर्स के लिए शक्तिशाली नेविगेशन घटक बनाना आसान हो जाता है जो उपयोगकर्ताओं के लिए समझने और बातचीत करने में आसान होते हैं।
