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

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

रिएक्ट राउटर एक शक्तिशाली लाइब्रेरी है जो रिएक्ट अनुप्रयोगों में रूटिंग को सक्षम बनाता है। यह आपको अपने एप्लिकेशन में कई मार्गों को परिभाषित करने और यूआरएल पथ के आधार पर विशिष्ट घटकों को प्रस्तुत करने की अनुमति देता है। यह क्षमता एकल-पृष्ठ एप्लिकेशन (एसपीए) बनाने के लिए महत्वपूर्ण है जहां नेविगेशन के लिए पूर्ण पृष्ठ पुनः लोड करने की आवश्यकता नहीं होती है।

रिएक्ट राउटर स्थापित करना
आरंभ करने के लिए, आपको रिएक्ट राउटर इंस्टॉल करना होगा। आप इसे npm का उपयोग करके कर सकते हैं:

npm install react-router-dom

बुनियादी रूटिंग की स्थापना

आइए एकाधिक मार्गों के साथ एक सरल एप्लिकेशन सेट करें। हम एक होम पेज, एक परिचय पेज और एक संपर्क पेज के साथ एक एप्लिकेशन बनाएंगे।

1. बुनियादी घटक बनाएँ
सबसे पहले, तीन घटक बनाएं: घर, परिचय, और संपर्क।

// Home.js
import React from 'react';

const Home = () => {
    return 
Home Page
;
};

export default Home;

// About.js
import React from 'react';

const About = () => {
    return 
About Page
;
};

export default About;

// Contact.js
import React from 'react';

const Contact = () => {
    return 
Contact Page
;
};

export default Contact;

2. राउटर सेट करें
अब, आइए आपकी मुख्य एप्लिकेशन फ़ाइल में राउटर सेट करें, आमतौर पर App.js.

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
    return (
        
    );
};

export default App;

स्पष्टीकरण:

• राउटर: ब्राउज़रराउटर घटक पूरे एप्लिकेशन को लपेटता है, जिससे रूटिंग सक्षम होती है।
• लिंक: लिंक घटक का उपयोग नेविगेशन लिंक बनाने के लिए किया जाता है जो पृष्ठ को पुनः लोड किए बिना यूआरएल बदलता है।
• रूट: रूट घटक एक पथ को परिभाषित करता है और पथ के मेल खाने पर रेंडर करने के लिए घटक को परिभाषित करता है।
• स्विच: स्विच घटक यह सुनिश्चित करता है कि एक समय में केवल एक ही मार्ग प्रस्तुत किया जाए।

पेजों के बीच नेविगेट करना
सेटअप पूरा होने पर, अब आप नेविगेशन मेनू में लिंक पर क्लिक करके होम, अबाउट और संपर्क पेजों के बीच नेविगेट कर सकते हैं। रिएक्ट राउटर यूआरएल परिवर्तनों को संभालेगा और पेज को रीफ्रेश किए बिना उचित घटक प्रस्तुत करेगा।

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

1. उपयोगकर्ता घटक बनाएं
उपयोगकर्ता.जेएस:

import React from 'react';
import { useParams } from 'react-router-dom';

const User = () => {
    const { userId } = useParams();
    return 
User ID: {userId}
;
};

export default User;

2. राउटर को अपडेट करें
अपने App.js में उपयोगकर्ता घटक के लिए एक मार्ग जोड़ें:

नेस्टेड रूट

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

नेस्टेड मार्गों का उदाहरण:

1. नेस्टेड मार्गों के साथ एक डैशबोर्ड घटक बनाएं:

// Dashboard.js
import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import Settings from './Settings';
import Profile from './Profile';

const Dashboard = () => {
    return (
        

            
Dashboard
            
    );
};

export default Dashboard;

1. डैशबोर्ड रूट को शामिल करने के लिए अपने App.js को अपडेट करें:

अब, /डैशबोर्ड/प्रोफ़ाइल या /डैशबोर्ड/सेटिंग्स पर नेविगेट करने से डैशबोर्ड के भीतर संबंधित घटक प्रस्तुत हो जाएंगे।

इस पोस्ट में, हमने पता लगाया कि रिएक्ट राउटर का उपयोग करके रिएक्ट एप्लिकेशन में रूटिंग कैसे लागू करें। हमने बुनियादी रूटिंग स्थापित करना, पृष्ठों के बीच नेविगेट करना, रूट पैरामीटर का उपयोग करना और नेस्टेड रूट बनाना शामिल किया।

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

अगली पोस्ट में, हम रिएक्ट हुक्स के उपयोग पर विस्तार से चर्चा करेंगे, उपयोग प्रभाव पर ध्यान केंद्रित करेंगे और यह कार्यात्मक घटकों में साइड इफेक्ट्स को कैसे प्रबंधित कर सकते हैं। बने रहें!