अध्याय 6: रिएक्ट राउटर (React Router)

इस अध्याय में, हम रिएक्ट.js में नेविगेशन और रूटिंग के लिए उपयोग किए जाने वाले एक शक्तिशाली टूल, रिएक्ट राउटर (React Router) का अन्वेषण करेंगे। रिएक्ट राउटर आपके सिंगल पेज एप्लिकेशन (SPA) को मल्टीपेज एप्लिकेशन की तरह कार्य करने की क्षमता प्रदान करता है। यह आपको URL के आधार पर विभिन्न कंपोनेंट्स को रेंडर करने की अनुमति देता है, जिससे आपका एप्लिकेशन अधिक डायनामिक और उपयोगकर्ता-अनुकूल बनता है।

इस अध्याय में, आप निम्नलिखित विषयों को सीखेंगे:

• रिएक्ट राउटर का परिचय (Introduction to React Router): रिएक्ट राउटर क्या है और इसे क्यों उपयोग किया जाता है।
• रूट्स और रूटिंग (Routes and Routing): रूट्स को परिभाषित करने और रूटिंग को लागू करने का तरीका।
• नेविगेशन (Navigation): विभिन्न पृष्ठों के बीच नेविगेशन करना।
• डाइनेमिक रूट्स (Dynamic Routes): डाइनेमिकली रूट्स को परिभाषित और प्रबंधित करना।
• रीडायरेक्शन (Redirection): उपयोगकर्ताओं को विभिन्न रूट्स पर रीडायरेक्ट करना।

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

रिएक्ट राउटर का परिचय (Introduction to React Router)

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

रिएक्ट राउटर क्या है? (What is React Router?)

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

रिएक्ट राउटर के प्रमुख घटक (Key Components of React Router)

रिएक्ट राउटर में कुछ मुख्य घटक हैं जो रूटिंग को लागू करने में सहायक होते हैं:

1. BrowserRouter: यह एक राउटर है जो HTML5 का इतिहास API का उपयोग करके URL को सिंक में रखता है। इसे आमतौर पर रूट लेवल पर उपयोग किया जाता है।

   import { BrowserRouter as Router } from 'react-router-dom';
   
   function App() {
     return (
       <Router>
         {/* Other components */}
       </Router>
     );
   }
   
   export default App;
   

    

2. Route: यह घटक URL पथ के आधार पर UI को रेंडर करता है। आप प्रत्येक रूट के लिए एक Route घटक परिभाषित कर सकते हैं।

   import { Route } from 'react-router-dom';
   
   function App() {
     return (
       <Router>
         <Route path="/" component={Home} />
         <Route path="/about" component={About} />
       </Router>
     );
   }
   
   export default App;
   

    

3. Link: यह घटक उपयोगकर्ताओं को विभिन्न रूट्स पर नेविगेट करने के लिए उपयोग किया जाता है। यह HTML एंकर टैग (<a>) के समान होता है, लेकिन पेज को रीफ्रेश नहीं करता।

   import { Link } from 'react-router-dom';
   
   function Navigation() {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   }
   
   export default Navigation;
   

    

4. Switch: यह घटक सुनिश्चित करता है कि केवल पहला मेल खाने वाला Route ही रेंडर हो। यह विशेष रूप से तब उपयोगी होता है जब आप विशिष्टता के आधार पर रूट्स को मिलाना चाहते हैं।

   import { Switch, Route } from 'react-router-dom';
   
   function App() {
     return (
       <Router>
         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/about" component={About} />
           <Route component={NotFound} />
         </Switch>
       </Router>
     );
   }
   
   export default App;
   

    

रिएक्ट राउटर के लाभ (Benefits of React Router)

• स्पा नेविगेशन (SPA Navigation): रिएक्ट राउटर बिना पेज रीफ्रेश के स्मूथ नेविगेशन प्रदान करता है।
• डीप लिंकिंग (Deep Linking): उपयोगकर्ता सीधे किसी विशिष्ट पृष्ठ पर नेविगेट कर सकते हैं।
• क्लाइंट-साइड रूटिंग (Client-Side Routing): सभी रूटिंग क्लाइंट-साइड पर होती है, जिससे सर्वर लोड कम होता है।
• सक्रिय लिंक स्टाइलिंग (Active Link Styling): सक्रिय लिंक को स्टाइल करना आसान होता है।

रूट्स और रूटिंग (Routes and Routing)

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

function App() {
  return (
    <Router>
      <div>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default App;

रिएक्ट राउटर (React Router) के उपयोग से, आप अपने रिएक्ट एप्लिकेशन में विभिन्न पृष्ठों के बीच नेविगेशन और रूटिंग को सरल और प्रभावी तरीके से लागू कर सकते हैं। रूट्स और रूटिंग के माध्यम से, आप अपने एप्लिकेशन में विभिन्न URL पाथ्स को परिभाषित कर सकते हैं और उनके आधार पर विभिन्न कंपोनेंट्स को रेंडर कर सकते हैं। इस सेक्शन में, हम रूट्स को परिभाषित करने, रूटिंग को लागू करने और विभिन्न रूटिंग तकनीकों पर चर्चा करेंगे।

रूट्स क्या हैं? (What are Routes?)

रूट्स (Routes) रिएक्ट राउटर के वे घटक हैं जो आपके एप्लिकेशन में विभिन्न URL पाथ्स के लिए अलग-अलग UI को परिभाषित करते हैं। प्रत्येक रूट एक पाथ और उससे जुड़े कम्पोनेंट को निर्दिष्ट करता है। जब उपयोगकर्ता किसी विशिष्ट URL पर नेविगेट करते हैं, तो रिएक्ट राउटर उस रूट के लिए निर्दिष्ट कम्पोनेंट को रेंडर करता है।

रूट्स का उदाहरण:

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

function App() {
  return (
    <Router>
      <div>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default App;

ऊपर दिए गए उदाहरण में, path="/" पाथ के लिए Home कंपोनेंट और path="/about" पाथ के लिए About कंपोनेंट रेंडर होगा।

रूटिंग का परिचय (Introduction to Routing)

रूटिंग रिएक्ट राउटर का वह प्रोसेस है जिसके माध्यम से आप अपने एप्लिकेशन में विभिन्न URL पाथ्स के लिए विभिन्न कम्पोनेंट्स को रेंडर करते हैं। रिएक्ट राउटर में रूटिंग को परिभाषित करने के लिए Route घटक का उपयोग किया जाता है। रूटिंग के माध्यम से, आप अपने एप्लिकेशन को विभिन्न पृष्ठों में विभाजित कर सकते हैं और उपयोगकर्ताओं को बिना पेज रिफ्रेश के विभिन्न पृष्ठों के बीच नेविगेट करने की सुविधा प्रदान कर सकते हैं।

रूटिंग का कार्यान्वयन (Implementing Routing)

1. BrowserRouter: BrowserRouter रिएक्ट राउटर का मुख्य राउटर है जो HTML5 इतिहास API का उपयोग करके URL को सिंक में रखता है। इसे एप्लिकेशन के रूट स्तर पर उपयोग किया जाता है।

   import { BrowserRouter as Router } from 'react-router-dom';
   
   function App() {
     return (
       <Router>
         {/* अन्य कम्पोनेंट्स */}
       </Router>
     );
   }
   
   export default App;
   

    

2. Route: Route घटक URL पाथ और उससे जुड़े कम्पोनेंट को निर्दिष्ट करता है।

   import { Route } from 'react-router-dom';
   
   function App() {
     return (
       <Router>
         <Route path="/" exact component={Home} />
         <Route path="/about" component={About} />
       </Router>
     );
   }
   
   export default App;
   

    

3. Switch: Switch घटक सुनिश्चित करता है कि केवल पहला मेल खाने वाला रूट ही रेंडर हो।

   import { Switch, Route } from 'react-router-dom';
   
   function App() {
     return (
       <Router>
         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/about" component={About} />
           <Route component={NotFound} />
         </Switch>
       </Router>
     );
   }
   
   export default App;
   

    

4. Link: Link घटक उपयोगकर्ताओं को विभिन्न रूट्स पर नेविगेट करने के लिए उपयोग किया जाता है। यह HTML एंकर टैग (<a>) के समान है, लेकिन पेज को रिफ्रेश नहीं करता।

   import { Link } from 'react-router-dom';
   
   function Navigation() {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   }
   
   export default Navigation;
   

    

डाइनेमिक रूट्स (Dynamic Routes)

डाइनेमिक रूट्स वे रूट्स होते हैं जो URL में डाइनेमिक वैल्यू का उपयोग करके परिभाषित किए जाते हैं। आप इन वैल्यूज़ को URL पाथ पैरामीटर्स के रूप में कैप्चर कर सकते हैं और उन्हें अपने कम्पोनेंट्स में उपयोग कर सकते हैं।

डाइनेमिक रूट्स का उदाहरण:

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

function UserProfile({ match }) {
  return <h1>User Profile for {match.params.userId}</h1>;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/user/:userId" component={UserProfile} />
      </Switch>
    </Router>
  );
}

export default App;

रीडायरेक्शन (Redirection)

रीडायरेक्शन का उपयोग उपयोगकर्ताओं को एक रूट से दूसरे रूट पर नेविगेट करने के लिए किया जाता है। Redirect घटक का उपयोग करके, आप उपयोगकर्ताओं को ऑटोमेटिकली किसी अन्य रूट पर रीडायरेक्ट कर सकते हैं।

रीडायरेक्शन का उदाहरण:

import { Route, Redirect, Switch } from 'react-router-dom';
import React from 'react';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/old-path" exact>
          <Redirect to="/new-path" />
        </Route>
        <Route path="/new-path" component={NewComponent} />
      </Switch>
    </Router>
  );
}

export default App;