✨ Quick Answer: React Router kya hai aur ise setup kaise karein? Hindi me seekhein React routing ka complete concept practical examples aur simple steps ke sath!

दोस्तों, सोचिए कि आप एक बहुत ही शानदार Web Application बना रहे हैं। आपने ReactJS का use करके सुंदर-सुंदर UI Screens भी बना ली हैं। लेकिन जैसे ही आप "About Us" या "Contact" page पर जाने के लिए किसी button पर click करते हैं, तो क्या होता है? आपका पूरा browser refresh हो जाता है! अगर ऐसा हो रहा है, तो आपका application एक Single Page Application (SPA) नहीं रह जाता, बल्कि वो traditional multi-page website की तरह react करने लगता है।

एक असली Web Application में user experience एकदम smooth, dynamic और super-fast होना चाहिए, जहाँ बिना browser refresh किए instantaneous page transition हो। इसी Problem को solve करने के लिए हमारी React Ecosystem की सबसे popular library जन्म लेती है, जिसे हम React Router कहते हैं। चलिए, आज चाय की चुस्की के साथ बिल्कुल आसान शब्दों में समझते हैं कि React Router का setup और implementation एक professional structure में कैसे किया जाता है।

React Router क्या है और इसका Use क्यों किया जाता है?

React Router एक standard, light-weight library है जो React applications में routing और navigation को manage करती है। Traditional websites में जब हम किसी link पर click करते हैं, तो browser server को एक fresh HTML document के लिए Request भेजता है। Server नया page भेजता है, और पूरा page reload होता है।

लेकिन React application एक single index.html file पर load होता है। यहाँ React Router browser के address bar के URL को track करता है और बिना page reload किए JavaScript की मदद से screen पर dynamic React components को switch (swap) कर देता है। इसे हम Client-side Routing कहते हैं।

React Router का use करने के मुख्य कारण:

• No Page Reloads: Navigation instant और super smooth हो जाता है।
• State Preservation: Page change होने पर भी application की global state refresh होकर reset नहीं होती।
• Dynamic Nested Routing: Layouts के अंदर layouts (sub-pages) render करना बच्चों का खेल बन जाता है।
• SEO-Friendly URL Patterns: Custom paths जैसे /products/:id बनाना बेहद आसान हो जाता है।

React Router v5 vs React Router v6 में क्या अंतर है?

अगर आप पुराने articles या tutorials पढ़ेंगे, तो वहाँ पुराने React Router v5 का syntax मिलेगा। लेकिन आज के समय में production-level apps में React Router v6 का ही use किया जाता है, जो काफी light-weight है और modern hooks के साथ fully optimized है।

इन दोनों versions के बड़े differences को इस table से समझते हैं:

React Router को Step-by-Step अपने Project में कैसे Setup करें?

चलिए, अब zero से start करते हैं। हम एक complete working React application setup करेंगे जिसमें different pages (Home, About, Dashboard) होंगे, Dynamic Routing होगी, और modern navigation techniques का use होगा।

Step 1: React Project Create करें (Vite के साथ)

सबसे पहले अपने terminal में जाएँ और नीचे दिए गए command की मदद से एक fresh Vite + React project generate करें:

npm create vite@latest my-routing-app -- --template react
cd my-routing-app
npm install

Step 2: React Router DOM Package Install करें

React Router को custom web apps के लिए support करने के लिए हमें react-router-dom package install करना होता है। अपने project terminal में इसे run करें:

npm install react-router-dom

Step 3: Component Structure Design करें

हमारा application professional दिखे, इसलिए हम clear folder structure follow करेंगे। अपने src directory के अंदर नीचे दिए गए format में components और pages create करें:

src/
 ├── components/
 │    └── Navbar.jsx
 ├── pages/
 │    ├── Home.jsx
 ├── pages/
 │    ├── About.jsx
 ├── pages/
 │    ├── Profile.jsx
 ├── pages/
 │    ├── NotFound.jsx
 ├── App.jsx
 └── main.jsx

Production-Ready React Router Implementation (Complete Code)

ध्यान देने वाली बात ये है कि React Router को configure करने के लिए हमें application को <BrowserRouter> wrapper के अंदर wrap करना पड़ता है। चलिए, एक-एक करके सभी files को pure code के साथ code करते हैं।

1. Root Entry Config: src/main.jsx

यहाँ हम पूरे React application को React Router context provide करने के लिए <BrowserRouter> component setup करेंगे।

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import { BrowserRouter } from 'react-router-dom';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  
    
      
    
  
);

2. Dynamic Components Setup: Pages

अब हमारे dynamic routes के लिए screens (pages) generate करते हैं।

File: src/pages/Home.jsx

import React from 'react';

export default function Home() {
  return (
    

      
🏡 Home Page
      
React Router Masterclass में आपका स्वागत है! यह हमारा landing page है।
    
  );
}

File: src/pages/About.jsx

import React from 'react';

export default function About() {
  return (
    

      
ℹ️ About Page
      
हम यहाँ React applications में seamless routing handle करना सीख रहे हैं।
    
  );
}

File: src/pages/Profile.jsx (Dynamic Component)

हम dynamic routing के concept को show करने के लिए Route URLs से parameter parse करने वाले component का handle setup करेंगे।

import React from 'react';
import { useParams } from 'react-router-dom';

export default function Profile() {
  // useParams Hook URL dynamically match context parse karta hai
  const { username } = useParams();

  return (
    

      
👤 User Profile Page
      
Welcome back, {username}!
    
  );
}

File: src/pages/NotFound.jsx (404 Fallback Component)

import React from 'react';
import { useNavigate } from 'react-router-dom';

export default function NotFound() {
  const navigate = useNavigate();

  return (
    

      
404
      
Oops! Page Not Found
      
जिस page को आप ढूँढ रहे हैं, वो अस्तित्व में नहीं है।
       navigate('/')} 
        style={{
          background: '#06b6d4',
          color: '#fff',
          border: 'none',
          padding: '10px 20px',
          borderRadius: '5px',
          cursor: 'pointer',
          fontWeight: 'bold'
        }}
      >
        Go to Home
      
    
  );
}

3. Global Navigation Layout: src/components/Navbar.jsx

Pro-Tip: कभी भी direct HTML anchor tags (<a href="...">) का use React Router में मत करना। Anchor tags browser refresh trigger कर देते हैं। इसकी जगह हमेशा <Link> या <NavLink> component का ही use करना चाहिए जो internal application transitions manage करते हैं।

import React from 'react';
import { NavLink } from 'react-router-dom';

export default function Navbar() {
  // Active route styling definition
  const linkStyle = ({ isActive }) => ({
    textDecoration: 'none',
    color: isActive ? '#06b6d4' : '#333',
    fontWeight: isActive ? 'bold' : 'normal',
    marginRight: '20px',
    fontSize: '18px'
  });

  return (
    
  );
}

4. Route Handler Mapping: src/App.jsx

यहाँ हम अपने component mapping को finalize करेंगे। <Routes> tag के अंदर specific configurations dynamic control flow create करती हैं।

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import About from './pages/About';
import Profile from './pages/Profile';
import NotFound from './pages/NotFound';

export default function App() {
  return (
    

      
      
      {/* Route paths selection setup */}
      
        } />
        } />
        
        {/* Dynamic Route: 'username' value state parameters map context create karegi */}
        } />
        
        {/* Wildcard 404 Fallback: Matching default route */}
        } />
      
    
  );
}

Dynamic Routing और Standard Hooks को कैसे समझें?

React Router v6 हमें powerful core hooks provide करता है, जो application components के dynamic context manipulation को बेहद आसान बना देते हैं। चलिए, इन essential hooks के working patterns को practical code use-case के साथ समझते हैं।

1. useParams() Hook

जब dynamic URL structure render करनी हो (जैसे Product display: /product/:productId, User profiles: /profile/:id), तब useParams hook route values direct map करता है।

// URL context structure: '/product/9988'
const { productId } = useParams();
// output validation: 9988

2. useNavigate() Hook

यदि user interaction (जैसे Form submit button click, successful login API feedback) के validate होने पर programmatically navigate करना हो, तो useNavigate hook direct transition inject कर देता है।

const navigate = useNavigate();

const handleLogin = () => {
  // Login implementation logic executes...
  navigate('/dashboard');
};

3. useLocation() Hook

यह hook complete browser window position tracking state dynamic monitor करता है। इसके state logic property parameters path analytics record verify करने में help करते हैं।

import { useLocation } from 'react-router-dom';

const location = useLocation();
console.log(location.pathname); // console outputs: current URL path context

React Router में आने वाले 2 Common Errors और उनके Solutions

जब developers React Router setup करना शुरू करते हैं, तो वे अक्सर कुछ errors का सामना करते हैं। चलिए, देखते हैं कि वे error क्यों आते हैं और उन्हें कैसे solve किया जाता है।

Error 1: "Cannot read property 'pathname' of undefined" या "useNavigate() can only be used in the context of a <Router>"

कारण: यह error तब आता है जब आप React Router के hooks (जैसे useNavigate, useLocation) का use ऐसे component में करते हैं जो <BrowserRouter> wrapper context के बाहर defined है।

Solution: सुनिश्चित करें कि आपकी complete file tree में <BrowserRouter> root component scale पर nested component properties को full wrapping pattern dynamic coverage provide कर रहा हो (जैसे हमने main.jsx में wrapper handle context apply किया है)।

Error 2: Production Hosting पर Page Refresh करने पर "404 Not Found" Error

कारण: Local server पर routing perfect चलती है, लेकिन Netlify, Vercel या AWS S3 पर project host करने पर dynamic pages को refresh करने पर browser 404 error देता है। ऐसा इसलिए होता है क्योंकि static page hosting server direct URL handle request (जैसे /about) browser window layout file level fallback config verify नहीं कर पाता।

Solution: आपको host server redirects file configuration write करनी होती है जो सभी route inputs को fallback index.html default fallback map redirection processing coordinate path logic pass करेगी:

• For Netlify: Root public path folder layout inside configuration file _redirects write करें और उसमें यह command line save करें:

  /*    /index.html   200

• For Vercel: Root file path configurations location pattern vercel.json check configuration parameters definition handle करें:

  {
    "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
  }

Scalability & Performance Best Practice: Lazy Loading and Suspense

जब dynamic routing applications का content load size bundle memory metrics scale cross करने लगता है, तब React code performance optimization strategies का implement verify dynamic scale handle validation structure provide करता है।

सभी components को core load bundle initial configuration level render execution logic map pass runtime download processing save use behavior runtime system improve provide strategy pattern logic support block load dynamic definition compile render code setup:

import React, { lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';

// Performance optimization setup using lazy component definitions
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Profile = lazy(() => import('./pages/Profile'));

export default function App() {
  return (
    

      
      {/* Route code-splitting with boundary loader wrapper */}
      Loading page dynamic content...
}>
        
          } />
          } />
          } />