रिएक्ट राउटर v6: आधुनिक वेब ऐप्स के लिए नेविगेशन पैटर्न में महारत हासिल करना

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

रिएक्ट राउटर v6 की मुख्य अवधारणाओं को समझना

विशिष्ट पैटर्न में जाने से पहले, आइए कुछ मूलभूत अवधारणाओं की समीक्षा करें:

• डिक्लेरेटिव रूटिंग: रिएक्ट राउटर एक डिक्लेरेटिव दृष्टिकोण का उपयोग करता है, जहाँ आप अपने रूट्स को रिएक्ट कंपोनेंट्स के रूप में परिभाषित करते हैं। यह आपके रूटिंग लॉजिक को स्पष्ट और बनाए रखने योग्य बनाता है।
• कंपोनेंट्स: मुख्य कंपोनेंट्स में BrowserRouter, HashRouter, MemoryRouter, Routes, और Route शामिल हैं।
• हुक्स: रिएक्ट राउटर रूटिंग जानकारी तक पहुँचने और नेविगेशन में हेरफेर करने के लिए useNavigate, useLocation, useParams, और useRoutes जैसे हुक्स प्रदान करता है।

1. <Routes> और <Route> के साथ डिक्लेरेटिव रूटिंग

रिएक्ट राउटर v6 की नींव डिक्लेरेटिव रूटिंग में निहित है। आप <Routes> और <Route> कंपोनेंट्स का उपयोग करके अपने रूट्स को परिभाषित करते हैं। <Routes> कंपोनेंट आपके रूट्स के लिए एक कंटेनर के रूप में कार्य करता है, और <Route> कंपोनेंट एक विशिष्ट रूट और उस कंपोनेंट को परिभाषित करता है जिसे तब रेंडर किया जाना है जब वह रूट वर्तमान URL से मेल खाता है।

उदाहरण: बेसिक रूट कॉन्फ़िगरेशन

यहाँ एक साधारण एप्लिकेशन के लिए रूट्स सेट करने का एक मूल उदाहरण है:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

export default App;

इस उदाहरण में, हम तीन रूट्स परिभाषित करते हैं:

• /: Home कंपोनेंट को रेंडर करता है।
• /about: About कंपोनेंट को रेंडर करता है।
• /contact: Contact कंपोनेंट को रेंडर करता है।

BrowserRouter कंपोनेंट ब्राउज़र हिस्ट्री-आधारित रूटिंग को सक्षम करता है। रिएक्ट राउटर वर्तमान URL को परिभाषित रूट्स के विरुद्ध मिलाता है और संबंधित कंपोनेंट को रेंडर करता है।

2. URL पैरामीटर्स के साथ डायनामिक रूट्स

डायनामिक रूट्स आपको ऐसे रूट्स बनाने की अनुमति देते हैं जो URL में विभिन्न मानों को संभाल सकते हैं। यह एक अद्वितीय पहचानकर्ता, जैसे कि उत्पाद आईडी या उपयोगकर्ता आईडी के आधार पर सामग्री प्रदर्शित करने के लिए उपयोगी है। रिएक्ट राउटर v6 URL पैरामीटर्स को परिभाषित करने के लिए : प्रतीक का उपयोग करता है।

उदाहरण: उत्पाद विवरण प्रदर्शित करना

मान लीजिए कि आपके पास एक ई-कॉमर्स एप्लिकेशन है और आप प्रत्येक उत्पाद का विवरण उसकी आईडी के आधार पर प्रदर्शित करना चाहते हैं। आप इस तरह एक डायनामिक रूट को परिभाषित कर सकते हैं:

import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

function ProductDetails() {
  const { productId } = useParams();

  // productId के आधार पर उत्पाद विवरण प्राप्त करें
  // ...

  return (
    

      
Product Details
      
Product ID: {productId}
      {/* उत्पाद विवरण यहाँ प्रदर्शित करें */}
    
  );
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

इस उदाहरण में:

• /products/:productId एक डायनामिक रूट को परिभाषित करता है जहाँ :productId एक URL पैरामीटर है।
• useParams हुक का उपयोग ProductDetails कंपोनेंट के भीतर productId पैरामीटर के मान तक पहुँचने के लिए किया जाता है।
• फिर आप अपने डेटा स्रोत से संबंधित उत्पाद विवरण प्राप्त करने के लिए productId का उपयोग कर सकते हैं।

अंतर्राष्ट्रीयकरण का उदाहरण: भाषा कोड को संभालना

एक बहुभाषी वेबसाइट के लिए, आप भाषा कोड को संभालने के लिए एक डायनामिक रूट का उपयोग कर सकते हैं:

} />

यह रूट /en/about, /fr/about, और /es/about जैसे URLs से मेल खाएगा। lang पैरामीटर का उपयोग तब उपयुक्त भाषा संसाधनों को लोड करने के लिए किया जा सकता है।

3. useNavigate के साथ प्रोग्रामेटिक नेविगेशन

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

उदाहरण: फ़ॉर्म सबमिशन के बाद रीडायरेक्ट करना

मान लीजिए आपके पास एक फ़ॉर्म सबमिशन है और फ़ॉर्म सफलतापूर्वक सबमिट होने के बाद आप उपयोगकर्ता को एक सफलता पृष्ठ पर रीडायरेक्ट करना चाहते हैं:

import { useNavigate } from "react-router-dom";

function MyForm() {
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();

    // फ़ॉर्म डेटा सबमिट करें
    // ...

    // सफल सबमिशन के बाद सफलता पृष्ठ पर रीडायरेक्ट करें
    navigate("/success");
  };

  return (
    

      {/* फ़ॉर्म फ़ील्ड */}
      Submit
    
  );
}

export default MyForm;

इस उदाहरण में:

• हम navigate फ़ंक्शन प्राप्त करने के लिए useNavigate हुक का उपयोग करते हैं।
• फ़ॉर्म सफलतापूर्वक सबमिट होने के बाद, हम उपयोगकर्ता को /success रूट पर रीडायरेक्ट करने के लिए navigate("/success") को कॉल करते हैं।

नेविगेशन के दौरान स्टेट पास करना

आप navigate के दूसरे तर्क का उपयोग करके नेविगेशन के साथ स्टेट भी पास कर सकते हैं:

navigate("/confirmation", { state: { orderId: "12345" } });

यह आपको लक्षित कंपोनेंट को डेटा पास करने की अनुमति देता है, जिसे useLocation हुक का उपयोग करके एक्सेस किया जा सकता है।

4. नेस्टेड रूट्स और लेआउट्स

नेस्टेड रूट्स आपको श्रेणीबद्ध रूटिंग संरचनाएँ बनाने की अनुमति देते हैं, जहाँ एक रूट दूसरे के भीतर नेस्टेड होता है। यह नेविगेशन के कई स्तरों वाले जटिल एप्लिकेशन को व्यवस्थित करने के लिए उपयोगी है। यह ऐसे लेआउट बनाने में मदद करता है जहाँ कुछ UI तत्व एप्लिकेशन के एक हिस्से में लगातार मौजूद रहते हैं।

उदाहरण: उपयोगकर्ता प्रोफ़ाइल अनुभाग

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

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Profile() {
  return (
    

      
User Profile
      

        

          Profile Information
        
        

          Settings
        
        

          Orders
        
      

      
        } />
        } />
        } />
      
    
  );
}

function ProfileInformation() {
  return 
Profile Information Component
;
}

function Settings() {
  return 
Settings Component
;
}

function Orders() {
  return 
Orders Component
;
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

इस उदाहरण में:

• /profile/* रूट किसी भी URL से मेल खाता है जो /profile से शुरू होता है।
• Profile कंपोनेंट नेस्टेड रूट्स को संभालने के लिए एक नेविगेशन मेनू और एक <Routes> कंपोनेंट रेंडर करता है।
• नेस्टेड रूट्स /profile/info, /profile/settings, और /profile/orders के लिए रेंडर किए जाने वाले कंपोनेंट्स को परिभाषित करते हैं।

पैरेंट रूट में * महत्वपूर्ण है; यह दर्शाता है कि पैरेंट रूट को किसी भी सब-पाथ से मेल खाना चाहिए, जिससे नेस्टेड रूट्स को Profile कंपोनेंट के भीतर ठीक से मिलाया जा सके।

5. "नॉट फाउंड" (404) त्रुटियों को संभालना

उन मामलों को संभालना आवश्यक है जहां उपयोगकर्ता एक ऐसे रूट पर नेविगेट करता है जो मौजूद नहीं है। रिएक्ट राउटर v6 इसे एक कैच-ऑल रूट के साथ आसान बनाता है।

उदाहरण: एक 404 पेज लागू करना

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function NotFound() {
  return (
    

      
404 - Not Found
      
The page you are looking for does not exist.
      Go back to home
    
  );
}

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

इस उदाहरण में:

• <Route path="*" element={<NotFound />} /> रूट एक कैच-ऑल रूट है जो किसी भी ऐसे URL से मेल खाता है जो किसी अन्य परिभाषित रूट से मेल नहीं खाता है।
• इस रूट को <Routes> कंपोनेंट के अंत में रखना महत्वपूर्ण है ताकि यह केवल तभी मेल खाए जब कोई अन्य रूट मेल न खाता हो।

6. रिएक्ट राउटर v6 के साथ डेटा लोडिंग रणनीतियाँ

रिएक्ट राउटर v6 में अपने पूर्ववर्ती (React Router v5 with `useRouteMatch`) की तरह अंतर्निहित डेटा लोडिंग तंत्र शामिल नहीं है। हालांकि, यह विभिन्न डेटा लोडिंग रणनीतियों को प्रभावी ढंग से लागू करने के लिए उपकरण प्रदान करता है।

विकल्प 1: कंपोनेंट्स में डेटा फ़ेच करना

सबसे सरल तरीका यह है कि डेटा को सीधे उस कंपोनेंट के भीतर फ़ेच किया जाए जो रूट को रेंडर करता है। आप useEffect हुक का उपयोग करके डेटा फ़ेच कर सकते हैं जब कंपोनेंट माउंट होता है या जब URL पैरामीटर बदलते हैं।

import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function ProductDetails() {
  const { productId } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchProduct() {
      try {
        const response = await fetch(`/api/products/${productId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setProduct(data);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchProduct();
  }, [productId]);

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;
  if (!product) return 
Product not found
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

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

विकल्प 2: डेटा फ़ेचिंग के लिए एक कस्टम हुक का उपयोग करना

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

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

फिर, आप इस हुक को अपने कंपोनेंट्स में उपयोग कर सकते हैं:

import { useParams } from "react-router-dom";
import useFetch from "./useFetch";

function ProductDetails() {
  const { productId } = useParams();
  const { data: product, loading, error } = useFetch(`/api/products/${productId}`);

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;
  if (!product) return 
Product not found
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

विकल्प 3: डेटा फ़ेचिंग क्षमताओं वाली रूटिंग लाइब्रेरी का उपयोग करना (TanStack Router, Remix)

TanStack Router और Remix जैसी लाइब्रेरीज़ अंतर्निहित डेटा फ़ेचिंग तंत्र प्रदान करती हैं जो रूटिंग के साथ सहजता से एकीकृत होते हैं। ये लाइब्रेरीज़ अक्सर इस तरह की सुविधाएँ प्रदान करती हैं:

• लोडर्स: फ़ंक्शन जो एक रूट रेंडर होने से *पहले* निष्पादित होते हैं, जिससे आप डेटा फ़ेच कर सकते हैं और इसे कंपोनेंट को पास कर सकते हैं।
• एक्शन्स: फ़ंक्शन जो फ़ॉर्म सबमिशन और डेटा म्यूटेशन को संभालते हैं।

ऐसी लाइब्रेरी का उपयोग करने से डेटा लोडिंग बहुत सरल हो सकती है और प्रदर्शन में सुधार हो सकता है, खासकर जटिल एप्लिकेशन के लिए।

सर्वर साइड रेंडरिंग (SSR) और स्टेटिक साइट जनरेशन (SSG)

बेहतर एसईओ और प्रारंभिक लोड प्रदर्शन के लिए, Next.js या Gatsby जैसे फ्रेमवर्क के साथ SSR या SSG का उपयोग करने पर विचार करें। ये फ्रेमवर्क आपको सर्वर पर या बिल्ड समय के दौरान डेटा फ़ेच करने और क्लाइंट को प्री-रेंडर्ड HTML परोसने की अनुमति देते हैं। यह क्लाइंट को प्रारंभिक लोड पर डेटा फ़ेच करने की आवश्यकता को समाप्त करता है, जिसके परिणामस्वरूप एक तेज़ और अधिक एसईओ-अनुकूल अनुभव होता है।

7. विभिन्न राउटर प्रकारों के साथ काम करना

रिएक्ट राउटर v6 विभिन्न वातावरणों और उपयोग के मामलों के अनुरूप विभिन्न राउटर कार्यान्वयन प्रदान करता है:

• BrowserRouter: नेविगेशन के लिए HTML5 हिस्ट्री API (pushState, replaceState) का उपयोग करता है। यह ब्राउज़र वातावरण में चलने वाले वेब एप्लिकेशन के लिए सबसे आम विकल्प है।
• HashRouter: नेविगेशन के लिए URL के हैश हिस्से (#) का उपयोग करता है। यह उन एप्लिकेशन के लिए उपयोगी है जिन्हें पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है या जो उन सर्वरों पर तैनात हैं जो HTML5 हिस्ट्री API का समर्थन नहीं करते हैं।
• MemoryRouter: आपके "URL" के इतिहास को मेमोरी में रखता है (URLs की एक ऐरे)। रिएक्ट नेटिव और टेस्टिंग जैसे वातावरण में उपयोगी है।

उस राउटर प्रकार को चुनें जो आपके एप्लिकेशन की आवश्यकताओं और वातावरण के लिए सबसे उपयुक्त हो।

निष्कर्ष

रिएक्ट राउटर v6 रिएक्ट एप्लिकेशन के लिए एक व्यापक और लचीला रूटिंग समाधान प्रदान करता है। इस ब्लॉग पोस्ट में चर्चा किए गए नेविगेशन पैटर्न को समझकर और लागू करके, आप मजबूत, उपयोगकर्ता-अनुकूल और बनाए रखने योग्य वेब एप्लिकेशन बना सकते हैं। <Routes> और <Route> के साथ डिक्लेरेटिव रूटिंग से लेकर URL पैरामीटर्स के साथ डायनामिक रूट्स, useNavigate के साथ प्रोग्रामेटिक नेविगेशन, और प्रभावी डेटा लोडिंग रणनीतियों तक, रिएक्ट राउटर v6 आपको अपने उपयोगकर्ताओं के लिए सहज नेविगेशन अनुभव बनाने में सशक्त बनाता है। और भी अधिक नियंत्रण और प्रदर्शन अनुकूलन के लिए उन्नत रूटिंग लाइब्रेरीज़ और SSR/SSG फ्रेमवर्क की खोज करने पर विचार करें। इन पैटर्नों को अपनी विशिष्ट एप्लिकेशन आवश्यकताओं के अनुकूल बनाना याद रखें और हमेशा एक स्पष्ट और सहज उपयोगकर्ता अनुभव को प्राथमिकता दें।