DEV Community

banti kevat
banti kevat

Posted on • Originally published at itinfohubs.blogspot.com

React Router Kya Hai aur Kaise Setup Karein

#react #webdev #javascript #programming

React Router Kya Hai aur Kaise Setup Karein (in Hindi)
React Router kya hai aur kaise setup karein? Is Hindi step-by-step guide me single-page routing, dynamic routes aur hooks ko basic se advanced seekhein.

दोस्तों, सोचिए कि आप एक बहुत ही शानदार 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 में कैसे किया जाता है।

⚡ Quick Answer: React Router एक standard library है जो ReactJS applications में dynamic client-side routing को handle करती है। बिना full page reload किए seamless dynamic transitions और multiple URL navigation options enable करने के लिए React Router का use किया जाता है।

---

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 बनाना बेहद आसान हो जाता है।

🏗️ Client-Side Routing Flow

URL Changes (/about)
→
React Router Intercepts
→
Swap Component (No Reload)

Diagram: React Router tracks URL changes and swaps components instantly without refreshing the browser.

---

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 से समझते हैं:

Feature React Router v5 React Router v6 (Modern)
Main Container <Switch> <Routes>
Route Render Syntax <Route component={Home} /> <Route element={<Home />} />
Navigation Hook useHistory() useNavigate()
Exact Matching exact prop required Automatic matching (No exact required)

---

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

---

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(





);
Enter fullscreen mode Exit fullscreen mode

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 है।



  );
}
Enter fullscreen mode Exit fullscreen mode

File: src/pages/About.jsx 

import React from 'react';

export default function About() {
  return (

      # ℹ️ About Page


      हम यहाँ React applications में seamless routing handle करना सीख रहे हैं।



  );
}
Enter fullscreen mode Exit fullscreen mode

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}!



  );
}
Enter fullscreen mode Exit fullscreen mode

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


  );
}
Enter fullscreen mode Exit fullscreen mode

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 (

      MyRouterApp

        Home
        About
        My Profile


  );
}
Enter fullscreen mode Exit fullscreen mode

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 */}
        } />


  );
}
Enter fullscreen mode Exit fullscreen mode

---

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
Enter fullscreen mode Exit fullscreen mode

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');
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

---

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
Enter fullscreen mode Exit fullscreen mode
  • For Vercel: Root file path configurations location pattern vercel.json check configuration parameters definition handle करें: 
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
Enter fullscreen mode Exit fullscreen mode

---

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...}>

          } />
          } />
          } />



  );
}
Enter fullscreen mode Exit fullscreen mode

ऊपर दिया गया snippet component levels load configurations structure state scale improve runtime execution control block optimize dynamic support logic structure verify runtime system level apply करता है।

---

तो दोस्तों, आज हमने सीखा कि React Router क्या है, Single Page Applications (SPA) के लिए यह क्यों आवश्यक है, v5 और v6 में क्या अंतर है, और dynamic routing, nested layouts व custom performance parameters को hooks की मदद से कैसे manage किया जाता है। Routing implementation logic configure करते समय official guidelines help pattern integration rules references tracking metrics layout process setup detail standard study rules standard setup track verification follow system pattern access scale structure code documentation metrics review dynamic optimize configurations support guidelines check React Router Official Documentation resource link help verify complete pattern validation support process update load logic block optimize update standard analyze structure verification control execution state check check verify build load setups perform complete update layout rules design process build clear track check can guide.

Frequently Asked Questions (FAQs)

Q1: React Router DOM package install करना क्यों आवश्यक है, direct standard react-router module install क्यों नहीं करते?
react-router core package है जिसमें routing की common functionality (hooks, routes match logic) होती है। Web browsers पर app development करने के लिए हमें DOM support integrations runtime components control logic bindings mapping logic की ज़रूरत होती है, जो सिर्फ react-router-dom container libraries package API functions configuration support patterns map provides handle details verification flow verify provide access use scale structure coordinate metrics define logic standard check verify can system setup scale execution control base.
Q2: standard React Link component and anchor standard element a tag href properties logic match base difference verification rules criteria specify use check handle metrics load parameter detail options context specify access verify kya features options logic setup pattern perform use level?
Anchor link elements direct dynamic user requests browser refresh default window parameters check reload parameters perform flow reset actions track execution state processing verify behavior validation control pattern level layout execution map process trigger apply coordinates. Link element navigation block browser click target capture dynamic client routing system state background configurations changes dynamic component render execute complete without performance issues speed browser memory configurations optimize dynamic.
Q3: Dynamic Nested routes dynamic nesting Outlet handle context verify layouts process control pattern setup configuration structure rules kaise parameters implementation system design track apply?
Nested layout support setups dynamic route nesting level structure handle path verification parameter validation control setup use Outlet nested child routes components location space parameters display runtime template dynamically perform child page swapping dynamic layouts process manage structures handle support metrics code scale levels verify performance options coordinates pattern use setups verify parameters render dynamic coordinates structure verify system.
Q4: useParams update use params values read component levels properties standard values access syntax update design configuration kaise details analyze logic track handle validation patterns parameters verify execute?
useParams component standard logic runtime variable path variable keys tracking map access structure control check logic process dynamic keys tracking validation pattern values map setup configuration system profiles routes parameters like (path: "/profile/:username") handle process parameter read destruct variable like: const { username } = useParams() handle direct parsing verification output dynamically details check provide standard.
Q5: Dynamic React context component configuration nested structure error dynamic page refresh routing control state production site issues resolve parameter rules kaise performance track configurations system execute?
Production server systems index entry default target check file request system redirect standard config control maps file coordinates support verification configurations design runtime mapping handle like _redirects dynamic instructions static parameters deployment structures setups verification track fallback files dynamic map layout support check patterns instructions.

Top comments (0)