रिअॅक्ट राउटर हिस्ट्री,पुशमध्ये डेटा पास करण्याशी संबंधित मुख्य समस्या ही आहे की डेटा पेज रिफ्रेशमध्ये टिकून राहत नाही. जेव्हा वापरकर्ता पृष्ठ रीफ्रेश करतो, तेव्हा 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. ही ओळ react-router-dom लायब्ररीमधून useHistory हुक आयात करते, जी हिस्ट्री ऑब्जेक्टमध्ये प्रवेश प्रदान करते जी अॅपमधील वर्तमान स्थानाचा मागोवा ठेवते.
2. ही ओळ MyComponent नावाचा फंक्शनल घटक घोषित करते आणि त्याला स्थिर व्हेरिएबलला नियुक्त करते.
3. हि ओळ हिस्ट्री ऑब्जेक्टमध्ये प्रवेश मिळवण्यासाठी आणि हिस्ट्री नावाच्या स्थिर व्हेरिएबलला नियुक्त करण्यासाठी ओळ 1 मध्ये आयात केलेल्या useHistory हुकचा वापर करते.
4. ही ओळ handleClick नावाचे फंक्शन घोषित करते जे डेटा नावाचा वितर्क घेते आणि history.push() वापरून इतिहासाच्या स्टॅकवर पाथनेम आणि स्टेट गुणधर्म असलेल्या ऑब्जेक्टला ढकलते.
5. ही ओळ onClick इव्हेंट हँडलरसह एक बटण घटक परत करते जे वापरकर्त्याद्वारे क्लिक केल्यावर त्याच्या युक्तिवाद म्हणून someData असलेल्या ऑब्जेक्टसह handleClick() कॉल करते.
इतिहासाचा धक्का
रिअॅक्ट राउटरमधील हिस्ट्री पुश ही एक पद्धत आहे जी ब्राउझरमध्ये पेज रिफ्रेश न करता प्रोग्रामॅटिकली URL बदलण्यासाठी वापरली जाते. हे विकासकांना एकल-पृष्ठ अनुप्रयोग तयार करण्यास अनुमती देते जे अद्याप नेव्हिगेशन आणि डीप लिंकिंग हाताळण्यास सक्षम आहेत. हिस्ट्री पुश ब्राउझरच्या हिस्ट्री एपीआयचा वापर करून कार्य करते, जे डेव्हलपरला पेज रीलोड न करता वर्तमान URL हाताळू देते. हे वापरकर्त्यांना प्रत्येक वेळी रीलोड न करता अनुप्रयोगाच्या वेगवेगळ्या पृष्ठांवर नेव्हिगेट करणे शक्य करते. याव्यतिरिक्त, याचा वापर डीप लिंकिंगसाठी केला जाऊ शकतो, ज्यामुळे वापरकर्त्यांना अनुप्रयोगाच्या विशिष्ट भागांमध्ये थेट लिंक करता येते.
प्रतिक्रिया राउटरमध्ये इतिहास कसा वापरायचा
React Router तुमच्या React ऍप्लिकेशन्समध्ये इतिहास वापरण्याचा मार्ग प्रदान करतो. इतिहास तुम्हाला वर्तमान पृष्ठ, तसेच भेट दिलेल्या कोणत्याही मागील पृष्ठांचा मागोवा ठेवण्याची परवानगी देतो. नेव्हिगेशन तयार करण्यासाठी आणि वापरकर्त्याच्या क्रियांचा मागोवा ठेवण्यासाठी हे उपयुक्त आहे.
रिअॅक्ट राउटरमध्ये इतिहास वापरण्यासाठी, तुम्हाला हिस्ट्री पॅकेजमधून createHistory() पद्धत वापरून इतिहास ऑब्जेक्ट तयार करणे आवश्यक आहे. हे तुम्हाला पुश(), रिप्लेस(), आणि गो() सारख्या पद्धतींमध्ये प्रवेश देईल. या पद्धती तुम्हाला ब्राउझरच्या URL मध्ये फेरफार करण्याची आणि तुमच्या अनुप्रयोगातील विविध मार्गांदरम्यान नेव्हिगेट करण्याची परवानगी देतात. URL मधील बदल ऐकण्यासाठी तुम्ही listen() पद्धत देखील वापरू शकता आणि त्यानुसार तुमचा अर्ज अपडेट करू शकता.
एकदा तुम्ही हिस्ट्री ऑब्जेक्ट तयार केल्यावर, ते तयार करताना तुम्ही ते तुमच्या राउटर घटकामध्ये पास करू शकता. हे रिअॅक्ट राउटरला वापरकर्त्यांनी केलेल्या सर्व बदलांचा मागोवा ठेवण्यास आणि त्यानुसार अपडेट करण्यास अनुमती देईल.
रिअॅक्ट राउटरसह इतिहास वापरणे विकसकांसाठी शक्तिशाली नेव्हिगेशन घटक तयार करणे सोपे करते जे वापरकर्त्यांना समजणे आणि त्यांच्याशी संवाद साधणे सोपे आहे.
