TITANS INSTITUTE

React
Routing COMPLETE NOTES

NOTES BY

Sir Yasir Ali Lashari

BrowserRouter Routes Route Link NavLink react-router-dom

1 React Routing — What & Why? CONCEPT

Kya hai? React Router ek library hai jo Single Page Application (SPA) mein multiple pages ka illusion deti hai — bina
page reload ke URL change hoti hai aur alag content dikhta hai.

Kyun chahiye? React sirf ek page render karta hai ( [Link] ). Bina routing ke Home, About, Contact ka alag link
nahi ban sakta.

Without Routing With Routing

Sirf ek page. URL change nahi. Back button kaam nahi. Links Alag URLs. Back/forward works. Bookmark ho sakta hai.
share nahi ho saktay. Professional SPA.

02 — Real Life Example TITANS · Sir Yasir Ali Lashari

2 Real Life Example ANALOGY

Socho ek Shopping Mall hai — building ek hai ( [Link] ), lekin andar alag alag dukanen hain (pages). Har dukan ka

apna address (URL) hai:

[Link] / [Link] /about

Main entrance — Home Page Information counter — About Page

[Link] /products [Link] /contact

Shopping floor — Products Page Help desk — Contact Page

✦ Mall ek baar khulta hai (page load), phir customer ghumta rehta hai bina bahar gaye (no reload). Yehi React Router karta hai!

03 — Installation TITANS · Sir Yasir Ali Lashari

3 Installation Commands TERMINAL

Pehle Vite + React project banao:

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

Phir React Router install karo:

terminal
npm install react-router-dom

! Sirf react-router-dom install karo — ye web apps ke liye hai. react-router-native mobile ke liye hota hai.

04 — Core Concepts TITANS · Sir Yasir Ali Lashari

4 BrowserRouter, Routes & Route CORE

B BrowserRouter — Poori app ko wrap karta hai. Routing system "on" karta hai. Sirf ek baar, [Link] mein lagao.

R Routes — Saari Route ko wrap karta hai. Current URL dekh kar decide karta hai kaunsa Route match hoga. Ek waqt mein sirf
ek.

r Route — URL path aur component ko jodata hai. path="/" → Home, path="/about" → About.

[Link]
// Mall analogy in code:
<BrowserRouter> // Mall building (wrapper)
<Routes> // Directory board
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>

05 — Sequence TITANS · Sir Yasir Ali Lashari

5 Sequence in [Link] — Zaruri hai? IMPORTANT

Haan, sequence matter karta hai! Route ka order decide karta hai kaunsa pehle match hoga.

✗ Wrong Order ✓ Correct Order

★ Rule: Specific routes pehle, wildcard ( * ) routes aakhir mein. React Router v6 mein exact likhna zaruri nahi — automatic hai.

06 — Project Structure TITANS · Sir Yasir Ali Lashari

6 Project Structure FOLDERS

my-app/ ├── src/ │ ├── pages/ ← Har page alag component │ │ ├── [Link] │ │ ├── [Link]
│ │ └── [Link] │ ├── my_components/ ← Reusable parts │ │ └── [Link] │ ├── [Link]
← Routes define hote hain │ └── [Link] ← Entry point + BrowserRouter ├── [Link] └──
[Link]

07 — [Link] TITANS · Sir Yasir Ali Lashari

7 [Link] — Code ENTRY POINT

[Link]
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './[Link]'
import App from './[Link]'
import { BrowserRouter } from 'react-router-dom'

createRoot([Link]('root')).render(
<StrictMode>
<BrowserRouter> {/* Routing on — ek baar, sab wrap */}
<App />
</BrowserRouter>
</StrictMode>
)

1 StrictMode — Development mein bugs dhundta hai. Production mein koi effect nahi. Hamesha rakho.

2 BrowserRouter — [Link] mein lagana best practice. Routing context poori app ko milta hai.

StrictMode › BrowserRouter › App › Pages

08 — [Link] TITANS · Sir Yasir Ali Lashari

8 [Link] — Code ROUTES KA GHAR

[Link]
import { Routes, Route } from "react-router-dom"
import Home from "./pages/Home"
import About from "./pages/About"
import Navbar from "./my_components/Navbar"

function App() {
return (
<>
<Navbar /> {/* Routes ke BAHAR — har page par */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</>
)
}
export default App

★ Key rule: Navbar Routes ke bahar rakho — warna sirf matching page par dikhega. Footer bhi Routes ke baad aata hai.

09 — [Link] TITANS · Sir Yasir Ali Lashari

9 [Link] — Code LINK COMPONENT

[Link]
import { Link } from "react-router-dom"

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

✗ <a href="/about"> — Galat! Page reload hota hai, React state reset ho jata hai.

✓ <Link to="/about"> — Sahi! Sirf component change, page reload nahi, fast SPA.

10 — Pages Code TITANS · Sir Yasir Ali Lashari

10 [Link] & [Link] PA G E S

pages/[Link]
function Home() {
return (
<div style={{ padding: '2rem' }}>
<h1>Home Page</h1>
<p>Welcome! Ye home page hai.</p>
</div>
)
}
export default Home

pages/[Link]
function About() {
return (
<div style={{ padding: '2rem' }}>
<h1>About Page</h1>
<p>Ye about page hai.</p>
</div>
)
}
export default About

✦ Naya page add karna? Nayi file banao pages/ mein aur [Link] mein ek <Route> add karo — bas!

11 — Link vs NavLink TITANS · Sir Yasir Ali Lashari

11 Link vs NavLink C O M PA R I S O N

Link Simple navigation. Sirf page change. Koi active state nahi. Buttons ya simple links ke liye use karo.

NavLink Active page ka link highlight karta [Link] milti hai. Navbar ke liye best choice hai.

NavLink example
import { NavLink } from 'react-router-dom'

<NavLink
to="/"
end
style={({ isActive }) => ({
color: isActive ? 'blue' : 'black',
fontWeight: isActive ? 'bold' : 'normal'
})}
>Home</NavLink>

! Home NavLink mein end prop zarur likho — warna / har URL par active rahega kyunki /about bhi / se start hota hai.

12 — Quick Summary TITANS · Sir Yasir Ali Lashari

✓ Quick Summary — Yaad Rakho REVISION

BrowserRouter [Link] mein, poori app ko wrap karo. Sirf ek baar.

Routes [Link] mein. Ek waqt mein sirf ek Route render karta hai.

Route path+element. URL ko component se jodata hai.

Link Navigation ke liye. Kabhi<a href>use mat karo.

NavLink Navbar ke liye. Active page highlight karta hai automatically.

Sequence Specific routes pehle, wildcard*aakhir mein.

Navbar position Routes ke bahar — taaki har page par dikhe.

END OF NOTES

TITANS Institute
Notes by Sir Yasir Ali Lashari