04 Routing (Navigation)

Single Page Applications (SPA) me page refresh nahi hota. Hum bas component badal dete hain. Iske liye hum use karte hain React Router DOM.

1. Setup 🛠️

Sabse pehle library install karein:

npm install react-router-dom

---

2. Basic Setup (BrowserRouter) 🌍

Apne main.jsx ya index.js me App ko wrap karein.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

---

3. Routes Define Karna (Routes & Route) 🗺️

App.jsx me batayein ki kis URL par kaunsa Component dikhega.

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

---

4. Navigation (Link) 🔗

<a> tag use na karein! Wo page refresh kar deta hai. Hamesha <Link> use karein.

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

---

5. Dynamic Routing (useParams) 🆔

Agar user /user/123 par jaye, to ID kaise milegi?

Step 1: Route me parameter lagayein

<Route path="/user/:id" element={<UserProfile />} />

Step 2: Component me ID access karein

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

function UserProfile() {
  const { id } = useParams(); // URL se ID nikal li
  return <h2>User ID: {id}</h2>;
}

---

6. Programmatic Navigation (useNavigate) 🚀

Agar button click hone ke baad redirect karna ho (jaise Login ke baad Dashboard).

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

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Login logic...
    navigate('/dashboard'); // Redirect kar diya
  };

  return <button onClick={handleLogin}>Login</button>;
}

---

Summary

• BrowserRouter: App ko wrap karne ke liye.
• Routes / Route: URL aur Component match karne ke liye.
• Link: Bina refresh ke navigate karne ke liye.
• useParams: URL se dynamic values nikalne ke liye.
• useNavigate: Code ke through redirect karne ke liye.

Next Up: Ab dekhte hain data flow kaise handle karein! State Management (Context API & Redux). 🌊