ज़रूर! यहां एक ऐप में `रिएक्ट-राउटर-डोम` इंस्टॉल करने का पूरा विवरण दिया गया है।
रिएक्ट राउटर डोम `React.js` से बने अनुप्रयोगों के लिए एक गतिशील और सशर्त रूटिंग टूल होने के लिए जाना जाता है। इसका मुख्य उद्देश्य ब्राउज़र के यूआरएल में किसी भी बदलाव के साथ यूजर इंटरफेस को सिंक्रोनाइज़ करना है। विभिन्न दृश्यों में परिवर्तन करते समय, आप पूरे पृष्ठ को पुनः लोड करने से बचना चुन सकते हैं, जो आपके वेब एप्लिकेशन को अधिक तरल और तेज़ उपयोगकर्ता अनुभव प्रदान करता है।
//Install React Router DOM npm install react-router-dom
रिएक्ट राउटर डोम के साथ एक समाधान
इस लाइब्रेरी की उपयोगिता का पता लगाने के लिए, आइए लैंडिंग, परिचय और संपर्क पृष्ठों के साथ एक काल्पनिक एप्लिकेशन पर विचार करें। हमारा लक्ष्य हर बार नेविगेशन बटन पर क्लिक करने पर वेबपेज को रीफ्रेश किए बिना इन पेजों पर नेविगेट करना है।
इसे पूरा करने के लिए, हम अपने रिएक्ट एप्लिकेशन में `रिएक्ट-राउटर-डोम` लागू करते हैं। इसमें निम्नलिखित सामान्य चरण शामिल हैं:
1. एनपीएम का उपयोग करके लाइब्रेरी स्थापित करें।
2. लाइब्रेरी से प्रासंगिक घटकों को अपने एप्लिकेशन में आयात करें।
3. राउटर लागू करें.
चरण-दर-चरण सेटअप और कार्यान्वयन
आइए प्रत्येक चरण का विश्लेषण करें ताकि आप अपनी परियोजनाओं में `रिएक्ट-राउटर-डोम` को कैसे एकीकृत करें, इसका स्पष्ट दृष्टिकोण प्राप्त कर सकें।
सबसे पहले, अपनी निर्भरता में `रिएक्ट-राउटर-डोम` जोड़ने के लिए अपने कंसोल में निम्नलिखित कमांड चलाएँ:
npm install react-router-dom
इसके बाद, आपको आयात करने की आवश्यकता होगी ब्राउज़रराउटर, मार्ग, तथा संपर्क 'रिएक्ट-राउटर-डोम' से घटकों को आपके एप्लिकेशन के मुख्य घटक (आमतौर पर `App.js`) में।
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
उसके बाद, मुख्य घटक को `राउटर` घटक के साथ लपेटें। 'राउटर' के अंदर किसी भी चीज़ के पास रिएक्ट राउटर तक पहुंच होगी और वह रूटिंग का उपयोग कर सकता है।
<Router> //The rest of the application comes here </Router>
इसके बाद, आप 'रूट' घटक का उपयोग करके अपने विभिन्न दृश्यों के लिए पथ सेट कर सकते हैं। मान लीजिए कि आपके पास `होमपेज`, `अबाउटपेज` और `कॉन्टैक्टपेज` घटक हैं, तो रूटिंग इस प्रकार होगी:
<Route path="/" exact component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route path="/contact" component={ContactPage} />
और अंत में, आप अपने नेविगेशन बार में 'लिंक' घटकों का उपयोग कर सकते हैं जहां आप नेविगेशन लिंक डालना चाहते हैं:
<Link to="/">Home</Link> <Link to="/about">About</Link> <Link to="/contact">Contact</Link>
रूटिंग के लिए `रिएक्ट-राउटर-डोम` का उपयोग करने में ये मुख्य चरण हैं।
अतिरिक्त पुस्तकालय और कार्य
`रिएक्ट राउटर DOM` व्यापक है, लेकिन आपको यूआरएल में डायनामिक पैरामीटर जोड़ने, 404 पृष्ठों, नेस्टेड रूटों को संभालने या यहां तक कि प्रोग्रामेटिक रूप से रूट स्विच करने के लिए अतिरिक्त कार्यक्षमता की आवश्यकता हो सकती है। अपने रिएक्ट एप्लिकेशन में रूटिंग पर सर्वांगीण नियंत्रण पाने के लिए `स्विच`, `रीडायरेक्ट`, `यूजपैराम्स` और `यूजहिस्ट्री` जैसी सुविधाओं की जांच करें।
निष्कर्षतः, `रिएक्ट-राउटर-डोम` `React.js` में बने एकल-पृष्ठ अनुप्रयोगों के लिए एक शक्तिशाली रूटिंग समाधान है। इसका कार्यान्वयन सीधा है और इसकी उपयोगिताएँ वेबसाइट के प्रदर्शन और उपयोगकर्ता अनुभव के लिए अत्यधिक फायदेमंद हो सकती हैं।
