हिस्ट्री रिएक्ट राउटर v6 का उपयोग करने से संबंधित मुख्य समस्या यह है कि यह हैश-आधारित रूटिंग का समर्थन नहीं करता है। इसका मतलब यह है कि सभी URL पूर्ण पथ होने चाहिए, जिससे एप्लिकेशन को प्रबंधित करना और बनाए रखना मुश्किल हो सकता है। इसके अतिरिक्त, डायनेमिक रूट के लिए कोई अंतर्निहित समर्थन नहीं है, जो कई पृष्ठों के साथ जटिल एप्लिकेशन बनाते समय एक समस्या हो सकती है। अंत में, हिस्ट्री रिएक्ट राउटर v6 सर्वर-साइड रेंडरिंग के लिए कोई समर्थन प्रदान नहीं करता है, जो कुछ मामलों में आवश्यक हो सकता है।
import {
BrowserRouter as Router,
Switch,
Route,
useHistory,
} from "react-router-dom";
function App() {
const history = useHistory();
// Handle a button click to push a new entry onto the history stack.
function handleClick() {
history.push("/new-location");
}
return (
<div>
<button type="button" onClick={handleClick}>Go to New Location</button>
<Switch>
<Route path="/new-location">
<NewLocation />
</Route>
</Switch>
</div> ); }
// यह कोड प्रतिक्रिया-राउटर-डोम लाइब्रेरी से BrowserRouter, Switch, Route और useHistory घटकों को आयात करता है।
// इसके बाद ऐप नामक एक फ़ंक्शन बनाता है जो इतिहास ऑब्जेक्ट बनाने के लिए उपयोग इतिहास हुक का उपयोग करता है।
// इस इतिहास वस्तु का उपयोग हैंडलक्लिक नामक फ़ंक्शन में किया जाता है, जो कॉल किए जाने पर इतिहास स्टैक पर एक नई प्रविष्टि को धकेलता है।
// ऐप फ़ंक्शन तब कुछ JSX लौटाता है जिसमें एक ऑनक्लिक हैंडलर वाला बटन शामिल होता है जो क्लिक करने पर हैंडलक्लिक को कॉल करता है।
// अंत में, इसके अंदर एक रूट घटक के साथ एक स्विच घटक होता है जो न्यूलोकेशन घटक को प्रस्तुत करता है जब इसका पथ "/ नया-स्थान" से मेल खाता है।
यूज हिस्ट्री क्या है
useHistory रिएक्ट राउटर द्वारा प्रदान किया गया एक रिएक्ट हुक है जो घटकों को प्रोग्रामेटिक रूप से नेविगेट करने के लिए हिस्ट्री ऑब्जेक्ट तक पहुँचने की अनुमति देता है। इसका उपयोग नए स्थानों को इतिहास के ढेर में धकेलने, वर्तमान स्थान को बदलने, इतिहास में आगे और पीछे जाने आदि के लिए किया जा सकता है।
मैं प्रतिक्रिया में रूट इतिहास कैसे प्राप्त करूं?
रिएक्ट राउटर में, आप हिस्ट्री हुक का उपयोग करके रूट हिस्ट्री प्राप्त कर सकते हैं। यह हुक इतिहास के उदाहरण तक पहुंच प्रदान करता है जिसका उपयोग आप नेविगेट करने, अपने ऐप के इतिहास में आगे और पीछे जाने और बहुत कुछ करने के लिए कर सकते हैं। इसका उपयोग करने के लिए, बस रिएक्ट राउटर से हुक आयात करें और फिर इसे अपने कंपोनेंट में कॉल करें:
आयात {useHistory} 'प्रतिक्रिया-राउटर-डोम' से;
const MyComponent = () => {
कॉन्स्ट हिस्ट्री = यूज़ हिस्ट्री ();
// अब आप `इतिहास` ऑब्जेक्ट के माध्यम से रूट इतिहास तक पहुंच सकते हैं।
वापसी (…);
}
प्रतिक्रिया राउटर इतिहास एपीआई का उपयोग करता है
हां, वर्तमान स्थान और उसके इतिहास पर नज़र रखने के लिए रिएक्ट राउटर HTML5 हिस्ट्री एपीआई का उपयोग करता है। यह रिएक्ट राउटर को पेज को फिर से लोड किए बिना अपडेट करने की अनुमति देता है, जिससे नेविगेशन तेज और आसान हो जाता है। हिस्ट्री एपीआई डीप लिंकिंग की भी अनुमति देता है, जो उपयोगकर्ताओं के लिए लिंक साझा करना आसान बनाता है जो उन्हें सीधे एक एप्लिकेशन में एक विशिष्ट पृष्ठ पर ले जाता है।
