React Router Basics
React, KHUD, ROUTING, PROVIDE, NAHI, KARTA — react-router-dom, EK, THIRD-PARTY, LIBRARY, hai, JO, CLIENT-SIDE, ROUTING, ENABLE, KARTI, hai. BrowserRouter, POORI, APP, KO, WRAP, KARTA, hai. Routes, aur, Route, COMPONENTS, URL, PATTERNS, KO, COMPONENTS, SE, MAP, KARTE, HAIN.
Link COMPONENT, <a> TAG, KI, TARAH, hai, LEKIN, POORA, PAGE, RELOAD, NAHI, KARTA — SIRF, URL, CHANGE, KARTA, hai, aur, React, Router, MATCHING, COMPONENT, RENDER, KAR, DETA, hai.
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} /> {/* 404 fallback */}
</Routes>
</BrowserRouter>
);
}- react-router-dom = third-party, CLIENT-SIDE, routing library
- Routes/Route = URL patterns, ko, components, se, MAP karte hain
- Link = poora page RELOAD, kiye, BINA, navigate karta hai
NavLink, Link, KA, EK, VARIANT, hai, JO, AUTOMATICALLY, EK, "active" CLASS, (YA, className, FUNCTION) ADD, KARTA, hai, JAB, USKA, to, PATH, CURRENT, URL, SE, MATCH, KARTA, hai — NAVIGATION, MENUS, MEIN, "CURRENT, PAGE" HIGHLIGHT, KARNE, KE, LIYE, USEFUL.
<NavLink to="/about" className={({ isActive }) => isActive ? "active" : ""}>
About
</NavLink>React Router, ke, ROUTES, KO, React.lazy() KE, SAATH, COMBINE, KARNA, EK, COMMON, PERFORMANCE, PATTERN, hai — "Code Splitting & Lazy Loading" CATEGORY, MEIN, ISKA, DETAIL, EXAMPLE, DIYA, GAYA, hai.