React Router v6: நவீன வலைப் பயன்பாடுகளுக்கான வழிசெலுத்தல் முறைகளில் தேர்ச்சி பெறுதல்

React Router v6 என்பது React பயன்பாடுகளுக்கான ஒரு சக்திவாய்ந்த மற்றும் நெகிழ்வான ரூட்டிங் நூலகமாகும். முழுப் பக்கத்தையும் மீண்டும் ஏற்றாமல் வழிசெலுத்தலை நிர்வகிப்பதன் மூலம், தடையற்ற பயனர் அனுபவத்துடன் ஒற்றைப் பக்கப் பயன்பாடுகளை (SPAs) உருவாக்க இது உங்களை அனுமதிக்கிறது. இந்த வலைப்பதிவு இடுகை, React Router v6-ஐப் பயன்படுத்தி அத்தியாவசிய வழிசெலுத்தல் முறைகளை ஆழமாக ஆராய்ந்து, வலிமையான மற்றும் பயனர் நட்பான வலைப் பயன்பாடுகளை உருவாக்கத் தேவையான அறிவையும் எடுத்துக்காட்டுகளையும் உங்களுக்கு வழங்கும்.

React Router v6-ன் அடிப்படைக் கருத்துக்களைப் புரிந்துகொள்ளுதல்

குறிப்பிட்ட முறைகளுக்குள் செல்வதற்கு முன், சில அடிப்படைக் கருத்துக்களைப் பார்ப்போம்:

• Declarative Routing: React Router ஒரு அறிவிப்பு அணுகுமுறையைப் பயன்படுத்துகிறது, இதில் உங்கள் ரூட்களை React கூறுகளாக வரையறுக்கிறீர்கள். இது உங்கள் ரூட்டிங் தர்க்கத்தை தெளிவாகவும் பராமரிக்க எளிதாகவும் ஆக்குகிறது.
• கூறுகள் (Components): இதன் முக்கிய கூறுகளில் BrowserRouter, HashRouter, MemoryRouter, Routes, மற்றும் Route ஆகியவை அடங்கும்.
• Hooks: React Router, ரூட்டிங் தகவலை அணுகவும் வழிசெலுத்தலைக் கையாளவும் useNavigate, useLocation, useParams, மற்றும் useRoutes போன்ற ஹூக்குகளை வழங்குகிறது.

1. <Routes> மற்றும் <Route> உடன் Declarative Routing

React Router v6-ன் அடித்தளம் அறிவிப்பு வழித்தடத்தில் (declarative routing) உள்ளது. உங்கள் ரூட்களை <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 கூறு, பிரவுசர் வரலாறு அடிப்படையிலான ரூட்டிங்கை செயல்படுத்துகிறது. React Router தற்போதைய URL-ஐ வரையறுக்கப்பட்ட ரூட்களுடன் ஒப்பிட்டு, அதற்கேற்ற கூற்றை காண்பிக்கிறது.

2. URL அளவுருக்களுடன் டைனமிக் ரூட்கள்

டைனமிக் ரூட்கள், URL-ல் உள்ள வெவ்வேறு மதிப்புகளைக் கையாளக்கூடிய ரூட்களை உருவாக்க உங்களை அனுமதிக்கின்றன. ஒரு தயாரிப்பு ஐடி அல்லது பயனர் ஐடி போன்ற ஒரு தனித்துவமான அடையாளங்காட்டியின் அடிப்படையில் உள்ளடக்கத்தைக் காண்பிக்க இது பயனுள்ளதாக இருக்கும். React Router 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 அளவுருவாகும்.
• ProductDetails கூற்றிற்குள் productId அளவுருவின் மதிப்பை அணுக useParams ஹூக் பயன்படுத்தப்படுகிறது.
• பின்னர் நீங்கள் உங்கள் தரவு மூலத்திலிருந்து தொடர்புடைய தயாரிப்பு விவரங்களைப் பெற productId-ஐப் பயன்படுத்தலாம்.

சர்வதேசமயமாக்கல் எடுத்துக்காட்டு: மொழி குறியீடுகளைக் கையாளுதல்

ஒரு பன்மொழி வலைத்தளத்திற்கு, மொழி குறியீடுகளைக் கையாள நீங்கள் ஒரு டைனமிக் ரூட்டைப் பயன்படுத்தலாம்:

} />

இந்த ரூட் /en/about, /fr/about, மற்றும் /es/about போன்ற URLகளுடன் பொருந்தும். பின்னர் பொருத்தமான மொழி ஆதாரங்களை ஏற்றுவதற்கு lang அளவுருவைப் பயன்படுத்தலாம்.

3. useNavigate உடன் நிரல் வழிசெலுத்தல்

நிலையான இணைப்புகளுக்கு அறிவிப்பு வழித்தடம் சிறந்தது என்றாலும், பயனர் செயல்கள் அல்லது பயன்பாட்டு தர்க்கத்தின் அடிப்படையில் நீங்கள் நிரல்ரீதியாக வழிசெலுத்த வேண்டியிருக்கும். React Router 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")-ஐ அழைக்கிறோம்.

வழிசெலுத்தலின் போது நிலையை (State) அனுப்புதல்

navigate-இன் இரண்டாவது ஆர்கியுமென்டைப் பயன்படுத்தி வழிசெலுத்தலுடன் நீங்கள் நிலையையும் (state) அனுப்பலாம்:

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) பிழைகளைக் கையாளுதல்

பயனர் இல்லாத ஒரு ரூட்டிற்குச் செல்லும் சமயங்களைக் கையாள்வது அவசியம். React Router 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. React Router v6 உடன் தரவு ஏற்றும் உத்திகள்

React Router v6, அதன் முன்னோடியைப் போல (React Router 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 பிழை! நிலை: ${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 பிழை! நிலை: ${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 போன்ற நூலகங்கள், ரூட்டிங்குடன் தடையின்றி ஒருங்கிணைக்கும் உள்ளமைக்கப்பட்ட தரவுப் பெறும் வழிமுறைகளை வழங்குகின்றன. இந்த நூலகங்கள் பெரும்பாலும் இதுபோன்ற அம்சங்களை வழங்குகின்றன:

• லோடர்கள் (Loaders): ஒரு ரூட் காண்பிக்கப்படுவதற்கு *முன்பு* செயல்படுத்தப்படும் செயல்பாடுகள், இது தரவைப் பெற்று அதை கூற்றிற்கு அனுப்ப உங்களை அனுமதிக்கிறது.
• செயல்கள் (Actions): படிவம் சமர்ப்பிப்புகள் மற்றும் தரவு மாற்றங்களைக் கையாளும் செயல்பாடுகள்.

அத்தகைய ஒரு நூலகத்தைப் பயன்படுத்துவது, குறிப்பாக சிக்கலான பயன்பாடுகளுக்கு, தரவு ஏற்றுவதை வியத்தகு முறையில் எளிதாக்கவும் செயல்திறனை மேம்படுத்தவும் முடியும்.

சர்வர் பக்க ரெண்டரிங் (SSR) மற்றும் ஸ்டேடிக் சைட் ஜெனரேஷன் (SSG)

மேம்பட்ட SEO மற்றும் ஆரம்ப ஏற்றுதல் செயல்திறனுக்காக, Next.js அல்லது Gatsby போன்ற கட்டமைப்புகளுடன் SSR அல்லது SSG ஐப் பயன்படுத்துவதைக் கவனியுங்கள். இந்த கட்டமைப்புகள் சர்வரில் அல்லது பில்ட் நேரத்தில் தரவைப் பெற்று, முன்பே ரெண்டர் செய்யப்பட்ட HTML-ஐ கிளைண்டிற்கு வழங்க உங்களை அனுமதிக்கின்றன. இது ஆரம்பகட்ட ஏற்றத்தின் போது கிளைன்ட் தரவைப் பெற வேண்டிய தேவையை நீக்குகிறது, இதன் விளைவாக வேகமான மற்றும் SEO-நட்பு அனுபவம் கிடைக்கிறது.

7. வெவ்வேறு ரூட்டர் வகைகளுடன் வேலை செய்தல்

React Router v6 பல்வேறு சூழல்கள் மற்றும் பயன்பாட்டு நிகழ்வுகளுக்குப் பொருந்தும் வகையில் வெவ்வேறு ரூட்டர் செயலாக்கங்களை வழங்குகிறது:

• BrowserRouter: வழிசெலுத்தலுக்கு HTML5 வரலாறு API (pushState, replaceState) ஐப் பயன்படுத்துகிறது. பிரவுசர் சூழலில் இயங்கும் வலைப் பயன்பாடுகளுக்கு இது மிகவும் பொதுவான தேர்வாகும்.
• HashRouter: வழிசெலுத்தலுக்கு URL-இன் ஹேஷ் பகுதியை (#) பயன்படுத்துகிறது. பழைய பிரவுசர்களை ஆதரிக்க வேண்டிய அல்லது HTML5 வரலாறு API-ஐ ஆதரிக்காத சர்வர்களில் பயன்படுத்தப்படும் பயன்பாடுகளுக்கு இது பயனுள்ளதாக இருக்கும்.
• MemoryRouter: உங்கள் "URL"-இன் வரலாற்றை நினைவகத்தில் (URLகளின் வரிசை) வைத்திருக்கும். React Native மற்றும் சோதனை போன்ற சூழல்களில் இது பயனுள்ளதாக இருக்கும்.

உங்கள் பயன்பாட்டின் தேவைகள் மற்றும் சூழலுக்கு மிகவும் பொருத்தமான ரூட்டர் வகையைத் தேர்வு செய்யவும்.

முடிவுரை

React Router v6, React பயன்பாடுகளுக்கு ஒரு விரிவான மற்றும் நெகிழ்வான ரூட்டிங் தீர்வை வழங்குகிறது. இந்த வலைப்பதிவு இடுகையில் விவாதிக்கப்பட்ட வழிசெலுத்தல் முறைகளைப் புரிந்துகொண்டு பயன்படுத்துவதன் மூலம், நீங்கள் வலிமையான, பயனர் நட்பான மற்றும் பராமரிக்கக்கூடிய வலைப் பயன்பாடுகளை உருவாக்க முடியும். <Routes> மற்றும் <Route> உடன் அறிவிப்பு வழித்தடம் முதல் URL அளவுருக்களுடன் டைனமிக் ரூட்கள், useNavigate உடன் நிரல் வழிசெலுத்தல் மற்றும் திறமையான தரவு ஏற்றும் உத்திகள் வரை, React Router v6 உங்கள் பயனர்களுக்கு தடையற்ற வழிசெலுத்தல் அனுபவங்களை உருவாக்க உங்களுக்கு அதிகாரம் அளிக்கிறது. இன்னும் ಹೆಚ್ಚಿನ கட்டுப்பாடு மற்றும் செயல்திறன் மேம்படுத்தலுக்கு, மேம்பட்ட ரூட்டிங் நூலகங்கள் மற்றும் SSR/SSG கட்டமைப்புகளை ஆராய்வதைக் கவனியுங்கள். இந்த முறைகளை உங்கள் குறிப்பிட்ட பயன்பாட்டுத் தேவைகளுக்கு ஏற்ப மாற்றியமைக்கவும், தெளிவான மற்றும் உள்ளுணர்வுள்ள பயனர் அனுபவத்திற்கு எப்போதும் முன்னுரிமை அளிக்கவும் நினைவில் கொள்ளுங்கள்.