लोड हो रहा है...

React Router

React Router रिएक्ट (React) में एक अत्यंत महत्वपूर्ण लाइब्रेरी है जो SPA (Single Page Applications) में नेविगेशन को सक्षम बनाती है। यह डेवलपर्स को URL पथों को निर्दिष्ट करने और उन्हें विशिष्ट रिएक्ट कंपोनेंट्स से लिंक करने की सुविधा देती है, जिससे पूरी पेज को रीलोड किए बिना स्मूद नेविगेशन संभव होता है। इससे यूजर एक्सपीरियंस बेहतर होता है और एप्लिकेशन की संरचना अधिक मॉड्यूलर और मेन्टेनेबल बनती है।
रिएक्ट डेवलपमेंट में React Router का उपयोग तब किया जाता है जब एक एप्लिकेशन में कई व्यू या पेज मौजूद हों। यह रिएक्ट के मूलभूत कॉन्सेप्ट जैसे कंपोनेंट्स, स्टेट मैनेजमेंट, डेटा फ्लो और लाइफसायकल के साथ सहजता से काम करता है। React Router के साथ काम करते समय डेवलपर्स को Prop Drilling कम करने, अनावश्यक Re-renders से बचने और रिएक्ट के बेसिक प्रिंसिपल्स के अनुसार कंपोनेंट्स को डिजाइन करने में मदद मिलती है।
इस ट्यूटोरियल में पाठक सीखेंगे कि कैसे स्टैटिक और डायनेमिक रूट्स बनाते हैं, Link कंपोनेंट का उपयोग करके नेविगेशन करते हैं, useParams का उपयोग कर URL पैरामीटर्स पढ़ते हैं, ProtectedRoute के माध्यम से सुरक्षित रूट्स बनाते हैं और स्टेट मैनेजमेंट तथा लाइफसायकल के साथ रूटिंग को इंटीग्रेट करते हैं। ये उदाहरण सीधे प्रोजेक्ट्स में लागू किए जा सकते हैं और बेहतरीन प्रैक्टिसेज के अनुसार डिज़ाइन किए गए हैं।

मूल उदाहरण

jsx

JSX Code

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function Home() {
return <h2>होम पेज</h2>;
}

function About() {
return <h2>हमारे बारे में</h2>;
}

function App() {
return ( <Router> <nav> <Link to="/">होम</Link> | <Link to="/about">हमारे बारे में</Link> </nav> <Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} /> </Routes> </Router>
);
}

export default App;

उपरोक्त उदाहरण React Router की बुनियादी सेटअप को दर्शाता है। BrowserRouter पूरे एप्लिकेशन को रूटिंग कॉन्टेक्स्ट प्रदान करता है। Routes कंपोनेंट सभी Route डेफिनिशन्स को होल्ड करता है, जबकि Route कंपोनेंट URL पथ को संबंधित रिएक्ट कंपोनेंट से लिंक करता है।
Link कंपोनेंट को पारंपरिक टैग की बजाय उपयोग किया जाता है ताकि पेज रीफ्रेश न हो और स्टेट मेन्टेन रहे। Home और About कंपोनेंट्स फ़ंक्शनल हैं और रिएक्ट में कंपोनेंट आधारित डिज़ाइन और जिम्मेदारी विभाजन को दर्शाते हैं।
यह उदाहरण React Router के मुख्य कॉन्सेप्ट्स दिखाता है: कंपोनेंट-बेस्ड रूटिंग, डिक्लेरेटिव रूट डिफिनिशन्स और स्टेटफुल नेविगेशन। यह Prop Drilling और अनावश्यक Re-Renders से बचता है और SPAs के लिए मजबूत आधार प्रदान करता है।

व्यावहारिक उदाहरण

jsx

JSX Code

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams, Navigate } from 'react-router-dom';

function Dashboard() {
const [user, setUser] = useState(null);

useEffect(() => {
setTimeout(() => setUser({ name: 'Mamad', role: 'admin' }), 1000);
}, []);

if (!user) return <p>लोड हो रहा है...</p>;

return <h2>स्वागत है {user.name} डैशबोर्ड में</h2>;
}

function Profile() {
const { username } = useParams();
return <h2>यूजर प्रोफाइल: {username}</h2>;
}

function ProtectedRoute({ children }) {
const isAuthenticated = true;
return isAuthenticated ? children : <Navigate to="/" />;
}

function App() {
return ( <Router> <nav> <Link to="/">होम</Link> | <Link to="/dashboard">डैशबोर्ड</Link> | <Link to="/profile/Mamad">प्रोफाइल</Link> </nav> <Routes>
<Route path="/" element={<h2>होम पेज</h2>} />
<Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
<Route path="/profile/:username" element={<Profile />} /> </Routes> </Router>
);
}

export default App;

यह उदाहरण React Router का उन्नत उपयोग दिखाता है। Dashboard कंपोनेंट useState और useEffect का उपयोग करके असिंक्रोनस डेटा लोड करता है और लाइफसायकल हैंडलिंग को प्रदर्शित करता है। Profile कंपोनेंट useParams का उपयोग कर डायनेमिक URL पैरामीटर्स पढ़ता है, जिससे Prop Drilling कम होता है।
ProtectedRoute संवेदनशील रूट्स को सुरक्षित करता है और अनऑथेंटिकेटेड यूजर्स को Navigate के जरिए रीडायरेक्ट करता है। यह संरचना रिएक्ट के बेसिक प्रिंसिपल्स के अनुरूप है, पुन: प्रयोज्य कंपोनेंट्स बनाती है और परफॉरमेंस ऑप्टिमाइजेशन सुनिश्चित करती है।

React Router के लिए बेहतरीन प्रैक्टिसेज में पुन: प्रयोज्य कंपोनेंट्स बनाना, स्टेट मैनेजमेंट का कुशल उपयोग, डायनेमिक रूट्स और लाइफसायकल इंटीग्रेशन शामिल हैं। सामान्य गलतियों से बचें जैसे सीधे स्टेट में बदलाव करना, Excessive Prop Drilling और अनावश्यक Re-Renders। Debugging React DevTools से किया जा सकता है। Performance सुधार के लिए React.memo और useCallback का उपयोग करें और भारी कंपोनेंट्स के लिए Lazy Loading और Suspense का उपयोग करें। संवेदनशील रूट्स को ऑथेंटिकेशन के माध्यम से सुरक्षित रखें।

📊 संदर्भ तालिका

रिएक्ट (React) Element/Concept	Description	Usage Example
BrowserRouter	Routing कॉन्टेक्स्ट प्रदान करता है	<BrowserRouter><App /></BrowserRouter>
Routes	सभी रूट्स को होल्ड करता है	<Routes><Route path="/" element={<Home />} /></Routes>
Route	URL पथ को कंपोनेंट से लिंक करता है	<Route path="/about" element={<About />} />
Link	स्मूद नेविगेशन के लिए	<Link to="/about">हमारे बारे में</Link>
useParams	डायनेमिक रूट पैरामीटर्स पढ़ने के लिए	const { id } = useParams();
Navigate	प्रोग्रामेटिक रीडायरेक्ट के लिए	<Navigate to="/login" />

React Router SPAs के लिए डिक्लेरेटिव और कंपोनेंट-बेस्ड रूटिंग प्रदान करता है। इसे सीखने से स्टैटिक और डायनेमिक रूट्स, सुरक्षित रूट्स और स्टेटफुल नेविगेशन को प्रभावी ढंग से संभालना आता है। आगे के लिए Hooks, Lazy Loading, Context API/Redux इंटीग्रेशन और परफॉरमेंस ट्यूनिंग का अध्ययन उपयोगी है। SPAs में अभ्यास करना और प्रैक्टिकल प्रोजेक्ट्स पर लागू करना ज्ञान को मजबूत करता है।