रियाक्ट राउटर 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 (
    

      
उत्पादन तपशील
      
उत्पादन आयडी: {productId}
      {/* येथे उत्पादनाचा तपशील प्रदर्शित करा */}
    
  );
}

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

export default App;

या उदाहरणात:

• /products/:productId एक डायनॅमिक रूट परिभाषित करतो जिथे :productId एक URL पॅरामीटर आहे.
• useParams हुक ProductDetails कंपोनंटमध्ये productId पॅरामीटरचे मूल्य मिळवण्यासाठी वापरला जातो.
• त्यानंतर तुम्ही तुमच्या डेटा स्रोतामधून संबंधित उत्पादनाचा तपशील मिळवण्यासाठी productId वापरू शकता.

आंतरराष्ट्रीयीकरणाचे उदाहरण: भाषा कोड हाताळणे

एका बहुभाषिक वेबसाइटसाठी, तुम्ही भाषा कोड हाताळण्यासाठी डायनॅमिक रूट वापरू शकता:

} />

हा रूट /en/about, /fr/about, आणि /es/about सारख्या URL शी जुळेल. 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 (
    

      {/* फॉर्म फील्ड्स */}
      सबमिट करा
    
  );
}

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 (
    

      
युझर प्रोफाइल
      

        

          प्रोफाइल माहिती
        
        

          सेटिंग्ज
        
        

          ऑर्डर्स
        
      

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

function ProfileInformation() {
  return 
प्रोफाइल माहिती कंपोनंट
;
}

function Settings() {
  return 
सेटिंग्ज कंपोनंट
;
}

function Orders() {
  return 
ऑर्डर्स कंपोनंट
;
}

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

export default App;

या उदाहरणात:

• /profile/* रूट /profile ने सुरू होणाऱ्या कोणत्याही URL शी जुळतो.
• 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 - नॉट फाउंड
      
तुम्ही शोधत असलेले पेज अस्तित्वात नाही.
      होमवर परत जा
    
  );
}

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

या उदाहरणात:

• <Route path="*" element={<NotFound />} /> रूट एक कॅच-ऑल रूट आहे जो इतर कोणत्याही परिभाषित रूटशी न जुळणाऱ्या कोणत्याही URL शी जुळतो.
• या रूटला <Routes> कंपोनंटच्या शेवटी ठेवणे महत्त्वाचे आहे जेणेकरून तो फक्त तेव्हाच जुळेल जेव्हा इतर कोणताही रूट जुळणार नाही.

6. रियाक्ट राउटर v6 सह डेटा लोडिंग स्ट्रॅटेजीज

रियाक्ट राउटर v6 मध्ये त्याच्या पूर्ववर्ती (रियाक्ट राउटर v5 `useRouteMatch` सह) सारखे अंगभूत डेटा लोडिंग मेकॅनिझम समाविष्ट नाहीत. तथापि, ते विविध डेटा लोडिंग स्ट्रॅटेजीज प्रभावीपणे लागू करण्यासाठी साधने प्रदान करते.

पर्याय 1: कंपोनंट्समध्ये डेटा फेच करणे

सर्वात सोपा दृष्टिकोन म्हणजे रूट रेंडर करणाऱ्या कंपोनंटमध्ये थेट डेटा फेच करणे. तुम्ही कंपोनंट माउंट झाल्यावर किंवा URL पॅरामीटर्स बदलल्यावर डेटा फेच करण्यासाठी useEffect हुक वापरू शकता.

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 
लोड होत आहे...
;
  if (error) return 
त्रुटी: {error.message}
;
  if (!product) return 
उत्पादन सापडले नाही
;

  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 
लोड होत आहे...
;
  if (error) return 
त्रुटी: {error.message}
;
  if (!product) return 
उत्पादन सापडले नाही
;

  return (
    

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

export default ProductDetails;

पर्याय 3: डेटा फेचिंग क्षमता असलेल्या राउटिंग लायब्ररीचा वापर करणे (TanStack Router, Remix)

TanStack Router आणि Remix सारख्या लायब्ररीज अंगभूत डेटा फेचिंग मेकॅनिझम देतात जे राउटिंगसह अखंडपणे समाकलित होतात. या लायब्ररीज अनेकदा खालील वैशिष्ट्ये प्रदान करतात:

• लोडर्स: फंक्शन्स जे रूट रेंडर होण्यापूर्वी कार्यान्वित केले जातात, ज्यामुळे तुम्हाला डेटा फेच करून तो कंपोनंटला पास करता येतो.
• ॲक्शन्स: फंक्शन्स जे फॉर्म सबमिशन आणि डेटा म्युटेशन हाताळतात.

अशा लायब्ररीचा वापर केल्याने डेटा लोडिंग लक्षणीयरीत्या सोपे होऊ शकते आणि कार्यक्षमता सुधारू शकते, विशेषतः जटिल ॲप्लिकेशन्ससाठी.

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

सुधारित SEO आणि सुरुवातीच्या लोड कार्यक्षमतेसाठी, Next.js किंवा Gatsby सारख्या फ्रेमवर्कसह SSR किंवा SSG वापरण्याचा विचार करा. हे फ्रेमवर्क तुम्हाला सर्व्हरवर किंवा बिल्ड टाइम दरम्यान डेटा फेच करण्याची आणि क्लायंटला प्री-रेंडर केलेले HTML सर्व्ह करण्याची परवानगी देतात. यामुळे क्लायंटला सुरुवातीच्या लोडवर डेटा फेच करण्याची आवश्यकता नाहीशी होते, परिणामी वेगवान आणि अधिक SEO-अनुकूल अनुभव मिळतो.

7. वेगवेगळ्या राउटर प्रकारांसह काम करणे

रियाक्ट राउटर v6 विविध वातावरण आणि वापराच्या प्रकरणांसाठी योग्य असे वेगवेगळे राउटर अंमलबजावणी प्रदान करते:

• BrowserRouter: नेव्हिगेशनसाठी HTML5 हिस्ट्री API (pushState, replaceState) वापरतो. ब्राउझर वातावरणात चालणाऱ्या वेब ॲप्लिकेशन्ससाठी ही सर्वात सामान्य निवड आहे.
• HashRouter: नेव्हिगेशनसाठी URL च्या हॅश भागाचा (#) वापर करतो. हे अशा ॲप्लिकेशन्ससाठी उपयुक्त आहे ज्यांना जुन्या ब्राउझरला समर्थन देण्याची आवश्यकता आहे किंवा जे HTML5 हिस्ट्री API ला समर्थन न देणाऱ्या सर्व्हरवर तैनात केलेले आहेत.
• MemoryRouter: तुमच्या "URL" चा इतिहास मेमरीमध्ये (URL ची ॲरे) ठेवतो. रियाक्ट नेटिव्ह आणि टेस्टिंग सारख्या वातावरणात उपयुक्त आहे.

तुमच्या ॲप्लिकेशनच्या आवश्यकता आणि वातावरणास अनुकूल असा राउटर प्रकार निवडा.

निष्कर्ष

रियाक्ट राउटर v6 रियाक्ट ॲप्लिकेशन्ससाठी एक सर्वसमावेशक आणि लवचिक राउटिंग सोल्यूशन प्रदान करतो. या ब्लॉग पोस्टमध्ये चर्चा केलेल्या नेव्हिगेशन पॅटर्न्स समजून आणि लागू करून, तुम्ही मजबूत, वापरकर्त्यासाठी अनुकूल आणि देखरेख करण्यायोग्य वेब ॲप्लिकेशन्स तयार करू शकता. <Routes> आणि <Route> सह डिक्लरेटिव्ह राउटिंगपासून ते URL पॅरामीटर्ससह डायनॅमिक रूट्स, useNavigate सह प्रोग्रॅमॅटिक नेव्हिगेशन आणि प्रभावी डेटा लोडिंग स्ट्रॅटेजीजपर्यंत, रियाक्ट राउटर v6 तुम्हाला तुमच्या वापरकर्त्यांसाठी अखंड नेव्हिगेशन अनुभव तयार करण्यास सक्षम करते. आणखी जास्त नियंत्रण आणि कार्यक्षमता ऑप्टिमायझेशनसाठी प्रगत राउटिंग लायब्ररीज आणि SSR/SSG फ्रेमवर्क एक्सप्लोर करण्याचा विचार करा. तुमच्या विशिष्ट ॲप्लिकेशन आवश्यकतांनुसार हे पॅटर्न्स जुळवून घेण्याचे लक्षात ठेवा आणि नेहमी स्पष्ट आणि अंतर्ज्ञानी वापरकर्ता अनुभवाला प्राधान्य द्या.