રિએક્ટ રાઉટર v6: આધુનિક વેબ એપ્સ માટે નેવિગેશન પેટર્નમાં નિપુણતા

રિએક્ટ રાઉટર v6 એ રિએક્ટ એપ્લિકેશન્સ માટે એક શક્તિશાળી અને લવચીક રાઉટિંગ લાઇબ્રેરી છે. તે તમને સંપૂર્ણ પેજ રીલોડ વિના નેવિગેશનનું સંચાલન કરીને સીમલેસ વપરાશકર્તા અનુભવ સાથે સિંગલ-પેજ એપ્લિકેશન્સ (SPAs) બનાવવાની મંજૂરી આપે છે. આ બ્લોગ પોસ્ટ રિએક્ટ રાઉટર v6 નો ઉપયોગ કરીને આવશ્યક નેવિગેશન પેટર્ન પર ઊંડાણપૂર્વક વિચાર કરશે, જે તમને મજબૂત અને વપરાશકર્તા-મૈત્રીપૂર્ણ વેબ એપ્લિકેશન્સ બનાવવા માટે જ્ઞાન અને ઉદાહરણો પ્રદાન કરશે.

રિએક્ટ રાઉટર v6 ના મુખ્ય ખ્યાલોને સમજવું

ચોક્કસ પેટર્નમાં ડૂબકી મારતા પહેલાં, ચાલો કેટલાક મૂળભૂત ખ્યાલોની સમીક્ષા કરીએ:

• ડિક્લેરેટિવ રાઉટિંગ: રિએક્ટ રાઉટર ડિક્લેરેટિવ અભિગમનો ઉપયોગ કરે છે, જ્યાં તમે તમારા રૂટ્સને રિએક્ટ કમ્પોનન્ટ્સ તરીકે વ્યાખ્યાયિત કરો છો. આ તમારા રાઉટિંગ તર્કને સ્પષ્ટ અને જાળવણીપાત્ર બનાવે છે.
• કમ્પોનન્ટ્સ: મુખ્ય કમ્પોનન્ટ્સમાં BrowserRouter, HashRouter, MemoryRouter, Routes, અને Route નો સમાવેશ થાય છે.
• હૂક્સ: રિએક્ટ રાઉટર રાઉટિંગ માહિતી એક્સેસ કરવા અને નેવિગેશનને મેનિપ્યુલેટ કરવા માટે useNavigate, useLocation, useParams, અને useRoutes જેવા હૂક્સ પ્રદાન કરે છે.

૧. <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 ને વ્યાખ્યાયિત રૂટ્સ સાથે મેળવે છે અને સંબંધિત કમ્પોનન્ટને રેન્ડર કરે છે.

૨. URL પેરામીટર્સ સાથે ડાયનેમિક રૂટ્સ

ડાયનેમિક રૂટ્સ તમને એવા રૂટ્સ બનાવવાની મંજૂરી આપે છે જે URL માં વિવિધ મૂલ્યોને હેન્ડલ કરી શકે છે. આ એક અનન્ય ઓળખકર્તા, જેમ કે પ્રોડક્ટ ID અથવા યુઝર ID, ના આધારે સામગ્રી પ્રદર્શિત કરવા માટે ઉપયોગી છે. રિએક્ટ રાઉટર v6 URL પેરામીટર્સને વ્યાખ્યાયિત કરવા માટે : પ્રતીકનો ઉપયોગ કરે છે.

ઉદાહરણ: પ્રોડક્ટની વિગતો દર્શાવવી

ધારો કે તમારી પાસે એક ઈ-કોમર્સ એપ્લિકેશન છે અને તમે દરેક પ્રોડક્ટ માટે તેની ID ના આધારે વિગતો પ્રદર્શિત કરવા માંગો છો. તમે આના જેવો ડાયનેમિક રૂટ વ્યાખ્યાયિત કરી શકો છો:

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

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

  // productId ના આધારે પ્રોડક્ટની વિગતો મેળવો
  // ...

  return (
    

      
પ્રોડક્ટની વિગતો
      
પ્રોડક્ટ ID: {productId}
      {/* અહીં પ્રોડક્ટની વિગતો દર્શાવો */}
    
  );
}

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

export default App;

આ ઉદાહરણમાં:

• /products/:productId એક ડાયનેમિક રૂટને વ્યાખ્યાયિત કરે છે જ્યાં :productId એક URL પેરામીટર છે.
• useParams હૂકનો ઉપયોગ ProductDetails કમ્પોનન્ટની અંદર productId પેરામીટરના મૂલ્યને એક્સેસ કરવા માટે થાય છે.
• પછી તમે તમારા ડેટા સ્રોતમાંથી સંબંધિત પ્રોડક્ટની વિગતો મેળવવા માટે productId નો ઉપયોગ કરી શકો છો.

આંતરરાષ્ટ્રીયકરણ ઉદાહરણ: ભાષા કોડ્સનું સંચાલન

બહુભાષી વેબસાઇટ માટે, તમે ભાષા કોડ્સને હેન્ડલ કરવા માટે ડાયનેમિક રૂટનો ઉપયોગ કરી શકો છો:

} />

આ રૂટ /en/about, /fr/about, અને /es/about જેવા URL સાથે મેળ ખાશે. lang પેરામીટરનો ઉપયોગ પછી યોગ્ય ભાષા સંસાધનો લોડ કરવા માટે કરી શકાય છે.

૩. 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 હૂકનો ઉપયોગ કરીને એક્સેસ કરી શકાય છે.

૪. નેસ્ટેડ રૂટ્સ અને લેઆઉટ્સ

નેસ્ટેડ રૂટ્સ તમને હાયરાર્કિકલ રાઉટિંગ સ્ટ્રક્ચર્સ બનાવવાની મંજૂરી આપે છે, જ્યાં એક રૂટ બીજાની અંદર નેસ્ટ થયેલો હોય છે. આ નેવિગેશનના બહુવિધ સ્તરો સાથેની જટિલ એપ્લિકેશન્સને ગોઠવવા માટે ઉપયોગી છે. આ એવા લેઆઉટ બનાવવામાં મદદ કરે છે જ્યાં એપ્લિકેશનના કોઈ વિભાગમાં ચોક્કસ 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/* રૂટ કોઈપણ URL સાથે મેળ ખાય છે જે /profile થી શરૂ થાય છે.
• Profile કમ્પોનન્ટ એક નેવિગેશન મેનુ અને નેસ્ટેડ રૂટ્સને હેન્ડલ કરવા માટે એક <Routes> કમ્પોનન્ટ રેન્ડર કરે છે.
• નેસ્ટેડ રૂટ્સ /profile/info, /profile/settings, અને /profile/orders માટે રેન્ડર કરવાના કમ્પોનન્ટ્સને વ્યાખ્યાયિત કરે છે.

પેરેન્ટ રૂટમાં * નિર્ણાયક છે; તે સૂચવે છે કે પેરેન્ટ રૂટ કોઈપણ સબ-પાથ સાથે મેળ ખાવો જોઈએ, જે નેસ્ટેડ રૂટ્સને Profile કમ્પોનન્ટની અંદર યોગ્ય રીતે મેળવવાની મંજૂરી આપે છે.

૫. "Not Found" (404) એરરનું સંચાલન

એવા કિસ્સાઓનું સંચાલન કરવું આવશ્યક છે જ્યાં વપરાશકર્તા એવા રૂટ પર નેવિગેટ કરે છે જે અસ્તિત્વમાં નથી. રિએક્ટ રાઉટર v6 આને કેચ-ઓલ રૂટ સાથે સરળ બનાવે છે.

ઉદાહરણ: 404 પેજનું અમલીકરણ

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

function NotFound() {
  return (
    

      
404 - Not Found
      
તમે જે પેજ શોધી રહ્યા છો તે અસ્તિત્વમાં નથી.
      હોમ પર પાછા જાઓ
    
  );
}

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

આ ઉદાહરણમાં:

• <Route path="*" element={<NotFound />} /> રૂટ એક કેચ-ઓલ રૂટ છે જે કોઈપણ URL સાથે મેળ ખાય છે જે અન્ય વ્યાખ્યાયિત રૂટ્સ સાથે મેળ ખાતો નથી.
• આ રૂટને <Routes> કમ્પોનન્ટના અંતે મૂકવું મહત્વપૂર્ણ છે જેથી તે ફક્ત ત્યારે જ મેળ ખાય જો બીજો કોઈ રૂટ મેળ ન ખાય.

૬. રિએક્ટ રાઉટર v6 સાથે ડેટા લોડિંગ વ્યૂહરચનાઓ

રિએક્ટ રાઉટર v6 માં તેના પુરોગામી (રિએક્ટ રાઉટર v5 `useRouteMatch` સાથે) જેવી બિલ્ટ-ઇન ડેટા લોડિંગ મિકેનિઝમ્સ શામેલ નથી. જોકે, તે વિવિધ ડેટા લોડિંગ વ્યૂહરચનાઓને અસરકારક રીતે અમલમાં મૂકવા માટેના સાધનો પ્રદાન કરે છે.

વિકલ્પ ૧: કમ્પોનન્ટ્સમાં ડેટા મેળવવો

સૌથી સરળ અભિગમ એ છે કે રૂટને રેન્ડર કરનાર કમ્પોનન્ટની અંદર સીધો ડેટા મેળવવો. તમે કમ્પોનન્ટ માઉન્ટ થાય ત્યારે અથવા 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;

આ અભિગમ સીધોસાદો છે પરંતુ જો તમારે બહુવિધ કમ્પોનન્ટ્સમાં ડેટા મેળવવાની જરૂર હોય તો કોડના ડુપ્લિકેશન તરફ દોરી શકે છે. તે ઓછું કાર્યક્ષમ પણ છે કારણ કે ડેટા મેળવવાની પ્રક્રિયા કમ્પોનન્ટ માઉન્ટ થયા પછી જ શરૂ થાય છે.

વિકલ્પ ૨: ડેટા મેળવવા માટે કસ્ટમ હૂકનો ઉપયોગ

કોડ ડુપ્લિકેશન ઘટાડવા માટે, તમે એક કસ્ટમ હૂક બનાવી શકો છો જે ડેટા મેળવવાના તર્કને સમાવે છે. આ હૂકનો પછી બહુવિધ કમ્પોનન્ટ્સમાં પુનઃઉપયોગ કરી શકાય છે.

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;

વિકલ્પ ૩: ડેટા મેળવવાની ક્ષમતાઓ સાથે રાઉટિંગ લાઇબ્રેરીનો ઉપયોગ (TanStack Router, Remix)

TanStack Router અને Remix જેવી લાઇબ્રેરીઓ બિલ્ટ-ઇન ડેટા મેળવવાની મિકેનિઝમ્સ ઓફર કરે છે જે રાઉટિંગ સાથે સીમલેસ રીતે સંકલિત થાય છે. આ લાઇબ્રેરીઓ ઘણીવાર આના જેવી સુવિધાઓ પ્રદાન કરે છે:

• લોડર્સ: ફંક્શન્સ જે રૂટ રેન્ડર થાય *તે પહેલાં* એક્ઝિક્યુટ થાય છે, જે તમને ડેટા મેળવીને કમ્પોનન્ટને પાસ કરવાની મંજૂરી આપે છે.
• એક્શન્સ: ફંક્શન્સ જે ફોર્મ સબમિશન અને ડેટા મ્યુટેશનને હેન્ડલ કરે છે.

આવી લાઇબ્રેરીનો ઉપયોગ ડેટા લોડિંગને નાટકીય રીતે સરળ બનાવી શકે છે અને પ્રદર્શન સુધારી શકે છે, ખાસ કરીને જટિલ એપ્લિકેશન્સ માટે.

સર્વર સાઇડ રેન્ડરિંગ (SSR) અને સ્ટેટિક સાઇટ જનરેશન (SSG)

સુધારેલ SEO અને પ્રારંભિક લોડ પ્રદર્શન માટે, Next.js અથવા Gatsby જેવા ફ્રેમવર્ક સાથે SSR અથવા SSG નો ઉપયોગ કરવાનું વિચારો. આ ફ્રેમવર્ક તમને સર્વર પર અથવા બિલ્ડ સમયે ડેટા મેળવવા અને ક્લાયન્ટને પ્રી-રેન્ડર કરેલ HTML સર્વ કરવાની મંજૂરી આપે છે. આનાથી ક્લાયન્ટને પ્રારંભિક લોડ પર ડેટા મેળવવાની જરૂરિયાત દૂર થાય છે, જેના પરિણામે ઝડપી અને વધુ SEO-ફ્રેન્ડલી અનુભવ મળે છે.

૭. વિવિધ રાઉટર પ્રકારો સાથે કામ કરવું

રિએક્ટ રાઉટર v6 વિવિધ વાતાવરણ અને ઉપયોગના કેસોને અનુકૂળ થવા માટે વિવિધ રાઉટર અમલીકરણો પ્રદાન કરે છે:

• BrowserRouter: નેવિગેશન માટે HTML5 હિસ્ટ્રી API (pushState, replaceState) નો ઉપયોગ કરે છે. તે બ્રાઉઝર વાતાવરણમાં ચાલતી વેબ એપ્લિકેશન્સ માટે સૌથી સામાન્ય પસંદગી છે.
• HashRouter: નેવિગેશન માટે URL ના હેશ ભાગ (#) નો ઉપયોગ કરે છે. આ એવી એપ્લિકેશન્સ માટે ઉપયોગી છે જેમને જૂના બ્રાઉઝર્સને સપોર્ટ કરવાની જરૂર હોય અથવા જે સર્વર્સ પર જમાવટ કરવામાં આવી હોય જે HTML5 હિસ્ટ્રી API ને સપોર્ટ કરતા નથી.
• MemoryRouter: તમારી "URL" ની હિસ્ટ્રી મેમરીમાં (URL નો એરે) રાખે છે. રિએક્ટ નેટિવ અને ટેસ્ટિંગ જેવા વાતાવરણમાં ઉપયોગી છે.

તમારી એપ્લિકેશનની જરૂરિયાતો અને વાતાવરણને શ્રેષ્ઠ અનુરૂપ રાઉટરનો પ્રકાર પસંદ કરો.

નિષ્કર્ષ

રિએક્ટ રાઉટર v6 રિએક્ટ એપ્લિકેશન્સ માટે એક વ્યાપક અને લવચીક રાઉટિંગ સોલ્યુશન પ્રદાન કરે છે. આ બ્લોગ પોસ્ટમાં ચર્ચાયેલ નેવિગેશન પેટર્નને સમજીને અને લાગુ કરીને, તમે મજબૂત, વપરાશકર્તા-મૈત્રીપૂર્ણ અને જાળવણીપાત્ર વેબ એપ્લિકેશન્સ બનાવી શકો છો. <Routes> અને <Route> સાથેના ડિક્લેરેટિવ રાઉટિંગથી લઈને URL પેરામીટર્સ સાથેના ડાયનેમિક રૂટ્સ, useNavigate સાથે પ્રોગ્રામેટિક નેવિગેશન અને અસરકારક ડેટા લોડિંગ વ્યૂહરચનાઓ સુધી, રિએક્ટ રાઉટર v6 તમને તમારા વપરાશકર્તાઓ માટે સીમલેસ નેવિગેશન અનુભવો બનાવવા માટે સશક્ત બનાવે છે. હજુ વધુ નિયંત્રણ અને પ્રદર્શન ઓપ્ટિમાઇઝેશન માટે અદ્યતન રાઉટિંગ લાઇબ્રેરીઓ અને SSR/SSG ફ્રેમવર્કનું અન્વેષણ કરવાનું વિચારો. તમારી ચોક્કસ એપ્લિકેશનની જરૂરિયાતોને અનુરૂપ આ પેટર્નને અનુકૂલિત કરવાનું યાદ રાખો અને હંમેશા સ્પષ્ટ અને સાહજિક વપરાશકર્તા અનુભવને પ્રાધાન્ય આપો.