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

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

import { BrowserRouter as Router, Route } from "react-router-dom";

ReactDOM.render(
  <Router>
    <Route path="/">
      <App />
    </Route>
  </Router>, 
  document.getElementById('root'));

1. "राउटर-राउटर-डोम 'से {ब्राउज़र राउटर को राउटर, रूट} के रूप में आयात करें;" - यह लाइन प्रतिक्रिया-राउटर-डोम लाइब्रेरी से ब्राउज़र राउटर और रूट घटकों को आयात करती है।

2. "ReactDOM.render(" - यह लाइन आपूर्ति किए गए कंटेनर में DOM में एक प्रतिक्रिया तत्व को प्रस्तुत करने के लिए ReactDOM रेंडर विधि को कॉल करती है और घटक के संदर्भ को वापस करती है (या स्टेटलेस घटकों के लिए शून्य लौटाती है)।

3. '”- यह एक राउटर घटक के लिए एक शुरुआती टैग है जिसका उपयोग हमारे सभी मार्गों को लपेटने के लिए किया जाएगा ताकि हमारे आवेदन के लिए रूटिंग कार्यक्षमता प्रदान की जा सके।

4. '” - यह एक रूट घटक के लिए एक शुरुआती टैग है जिसका उपयोग हमारे आवेदन के भीतर एक एकल मार्ग को परिभाषित करने के लिए किया जाएगा जो '/' पर किए गए किसी भी अनुरोध से मेल खाएगा।

5. '”- यह एक सेल्फ क्लोजिंग टैग है जो हमारे DOM ट्री में एक ऐप कंपोनेंट को रेंडर करता है जब यह रूट रिएक्ट राउटर डोम से मेल खाता है।
ऐप कंपोनेंट कोई भी रिएक्ट कंपोनेंट हो सकता है जिसे हमने अपने कोडबेस में कहीं और परिभाषित किया है या किसी अन्य लाइब्रेरी या पैकेज से इंपोर्ट किया है जैसे मटीरियल यूआई या बूटस्ट्रैप आदि…

6. "" - यह रूट कंपोनेंट के लिए एक क्लोजिंग टैग है जो ऊपर लाइन 4 पर खोला गया था, यह इस विशेष रूट परिभाषा को बंद कर देता है ताकि बाद में हमारे कोडबेस में इसकी कार्यक्षमता या व्यवहार को प्रभावित किए बिना अन्य रूट जोड़े जा सकें। .

7. "" - यह राउटर कंपोनेंट के लिए एक क्लोजिंग टैग है जो ऊपर लाइन 3 पर खोला गया था, यह इस विशेष राउटर परिभाषा को बंद कर देता है ताकि बाद में हमारे कोडबेस में इसकी कार्यक्षमता या व्यवहार को प्रभावित किए बिना अन्य राउटर जोड़े जा सकें। ..

8."document.getElementById('root'));" - अंत में, हम ReactDOM रेंडर मेथड के तर्क के रूप में दस्तावेज़ getElementById('root') पास करते हैं जो यह बताता है कि वास्तव में हम DOM ट्री के अंदर ऐप को कहां माउंट/रेंडर करना चाहते हैं (इस मामले में आईडी के साथ एक तत्व के अंदर =” जड़")।

प्रतिक्रिया-राउटर-डोम पैकेज

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

प्रतिक्रिया राउटर डोम कोड उदाहरण कैसे डाउनलोड करें

1. रिएक्ट राउटर डोम स्थापित करें:
अपनी प्रोजेक्ट डायरेक्टरी में, रिएक्ट राउटर डोम को स्थापित करने के लिए निम्न कमांड चलाएँ:
`एनपीएम प्रतिक्रिया-राउटर-डोम स्थापित करें`

2. रिएक्ट राउटर डोम आयात करें:
एक बार जब आप रिएक्ट राउटर डोम स्थापित कर लेते हैं, तो आप इसे निम्नलिखित कोड के साथ अपने प्रोजेक्ट में आयात कर सकते हैं:
'प्रतिक्रिया-राउटर-डोम' से `आयात {ब्राउज़र राउटर राउटर, रूट} के रूप में

3. रूट घटक बनाएँ:
अगला, एक रूट घटक बनाएं जो उपयोगकर्ता द्वारा निर्दिष्ट पथ पर जाने पर पृष्ठ को प्रस्तुत करेगा। उदाहरण के लिए, यदि आप किसी पृष्ठ को प्रस्तुत करना चाहते हैं जब कोई आपके आवेदन में / होम पर जाता है, तो आप निम्न कोड का उपयोग कर सकते हैं:
``

4. राउटर घटक के साथ अपना ऐप लपेटें:
अंत में, अपने ऐप को राउटर कंपोनेंट के साथ लपेटें ताकि आपके सभी रूट सही तरीके से प्रस्तुत किए जा सकें। आप अपनी रूट फ़ाइल (आमतौर पर index.js) में निम्न कोड का उपयोग करके ऐसा कर सकते हैं: ` `.

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

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