हल: रिएक्ट राउटर डोम को कैसे स्थापित करें

रिएक्ट राउटर DOM, रूटिंग क्षमताओं के साथ सिंगल-पेज एप्लिकेशन बनाने के लिए रिएक्ट इकोसिस्टम में व्यापक रूप से उपयोग की जाने वाली लाइब्रेरी है। इस लाइब्रेरी का एक महत्वपूर्ण लाभ यह है कि यह यूआरएल के मिलान और कुछ घटकों को सक्रिय करने के लिए कई प्रकार की सुविधाएँ प्रदान करता है।

रिएक्ट राउटर डोम क्या है?

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

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

रिएक्ट राउटर डोम स्थापित करना

इस सेटअप को प्राप्त करने के लिए, हमें सबसे पहले रिएक्ट-राउटर-डोम लाइब्रेरी को इंस्टॉल करना होगा। यह आपके टर्मिनल पर निम्नलिखित कमांड चलाकर आसानी से किया जा सकता है:

npm install react-router-dom

यह कमांड इंस्टॉल करता है रिएक्ट राउटर डोम हमारे प्रोजेक्ट में पैकेज। सफल इंस्टालेशन पर, अब हम 'रिएक्ट-राउटर-डोम' से आवश्यक घटक को अपने एप्लिकेशन में आयात कर सकते हैं।

रिएक्ट राउटर डोम की स्थापना

अब जब हमने इसे अपने प्रोजेक्ट पर सफलतापूर्वक स्थापित कर लिया है, तो इसे लागू करने का समय आ गया है। आइए प्रतिक्रिया-राउटर-डोम के बुनियादी कार्यान्वयन पर एक नज़र डालें:

import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Component1 from './Component1';
import Component2 from './Component2';
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Component1} />
        <Route path="/component2" component={Component2} />
      </Switch>
    </Router>
  );
}
export default App;

उपरोक्त कोड में, हमने आवश्यक घटकों को आयात किया है रिएक्ट राउटर डोम पुस्तकालय।

संहिता को समझना

  • RSI `यूआई को यूआरएल के साथ सिंक में रखने के लिए घटक HTML5 इतिहास एपीआई (पुशस्टेट, रिप्लेसस्टेट और पॉपस्टेट इवेंट) का उपयोग करता है। हमने इसे ` का उपनाम दिया है`सुविधा के लिए.
  • राउटर के भीतर, हमने एक ` रखा है`घटक. यह रिएक्ट राउटर घटक अपने बच्चों के माध्यम से खोज करता है`घटकों को पहले रेंडर करने के लिए जहां पथ प्रोप स्थान के वर्तमान पथनाम से मेल खाता है।
  • अगले चरणों में `शामिल है`घटक. यहां जादू पैदा होता है। रूट घटक का उपयोग हमारे एप्लिकेशन के विभिन्न मार्गों को परिभाषित करने के लिए किया जाता है। हमने दो पथ परिभाषित किए हैं, एक डिफ़ॉल्ट पथ ('/') जो कंपोनेंट1 को लोड करता है, और दूसरा पथ ('/कंपोनेंट2') जो एक्सेस होने पर कंपोनेंट2 को लोड करेगा।

रिएक्ट में सिंगल-पेज एप्लिकेशन बनाने के लिए रूटिंग की अवधारणा मौलिक है। साथ रिएक्ट राउटर डोम, इसे लागू करना सरल और सहज हो जाता है।

अतिरिक्त सुविधाएँ

रिएक्ट राउटर डोम ऊपर उल्लिखित सुविधाओं के अलावा और भी कई सुविधाएँ प्रदान करता है। उदाहरण के लिए, नेस्टेड रूटिंग, यूआरएल पैरामीटर्स, प्रोग्रामेटिकली नेविगेशन इत्यादि कुछ अतिरिक्त सुविधाएं हैं जो यह लाइब्रेरी डेवलपर अनुभव को बढ़ाने के लिए प्रदान करती है।

रिएक्ट राउटर डोम को समझना और उसमें महारत हासिल करना किसी भी रिएक्ट डेवलपर के लिए महत्वपूर्ण है क्योंकि यह गतिशील और इंटरैक्टिव वेब एप्लिकेशन बनाने का आधार बनता है।

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

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