Nested Routes
Nested Route, COMPONENTS, EK, SHARED, LAYOUT, (jaise, NAVIGATION, SIDEBAR) KO, MULTIPLE, "CHILD", ROUTES, KE, BEECH, SHARE, KARNE, DETE, HAIN — LAYOUT, COMPONENT, KHUD, RE-RENDER, NAHI, HOTA, JAB, CHILD, ROUTE, CHANGE, HOTI, hai.
<Outlet />, EK, "PLACEHOLDER", hai, PARENT, LAYOUT, COMPONENT, KE, ANDAR — REACT, ROUTER, YAHA, MATCHING, CHILD, ROUTE, KA, COMPONENT, RENDER, KAR, DETA, hai.
<Routes>
<Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<Overview />} /> {/* /dashboard */}
<Route path="settings" element={<Settings />} /> {/* /dashboard/settings */}
<Route path="profile" element={<Profile />} /> {/* /dashboard/profile */}
</Route>
</Routes>
function DashboardLayout() {
return (
<div className="dashboard">
<Sidebar />
<main><Outlet /></main> {/* child route, YAHA render hota hai */}
</div>
);
}- Nested routes = shared, layout, (Sidebar/Header), MULTIPLE, child, routes, ke, BEECH
- <Outlet /> = child route, KAHA, RENDER, HOGA, USKA, PLACEHOLDER
- index route = default child, JAB, URL, EXACTLY, PARENT, PATH, MATCH, KARE
Modern, React Router (v6.4+, "data, APIs"), HAR, NESTED, ROUTE, KO, APNA, KHUD, KA, loader FUNCTION, DE, SAKTA, hai — HAR, LEVEL, KA, DATA, PARALLEL, MEIN, FETCH, HOTA, hai, "WATERFALL" REQUESTS, KE, BAJAYE.
EK, Route, BINA, path, KE, (SIRF, element), EK, "LAYOUT, ROUTE" BAN, JAATI, hai — URL, MEIN, KOI, SEGMENT, ADD, NAHI, KARTI, SIRF, SHARED, UI, (jaise, EK, COMMON, HEADER) SAARE, CHILD, ROUTES, KE, LIYE, PROVIDE, KARTI, hai.
<Route element={<AppLayout />}> {/* no path — layout only */}
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Route>