Nested Routes बनाना
In this page:
<Route path="/parent" element={<ParentLayout />}>
<Route path="child" element={<ChildPage />} />
<Route index element={<DefaultChild />} />
</Route>Routes Nest क्यों करें
कई apps के पास एक persistent layout होता है (जैसे एक sidebar वाला dashboard) जहां सिर्फ inner content pages के बीच बदलता है। Nested routes आपको उस shared layout को एक बार parent route के रूप में declare करने देते हैं, हर specific page को इसके अंदर render किए गए child route के रूप में।
उदाहरण: Why Nest Routes
// Run in your local React project (npm install required)
import { Routes, Route, Outlet } from 'react-router-dom';
function DashboardLayout() {
return <div><h2>Dashboard</h2><Outlet /></div>;
}
function Profile() { return <p>Profile page</p>; }
function AppRoutes() {
return (
<Routes>
<Route path="/dashboard" element={<DashboardLayout />}>
<Route path="profile" element={<Profile />} />
</Route>
</Routes>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Child Paths कैसे Relative होते हैं
एक child route का path automatically इसके parent के path से joined होता है। एक child जो path=profile के रूप में एक parent के '/dashboard' के अंदर declared हो असल में पूरे URL '/dashboard/profile' को match करता है — आप child में parent का path repeat नहीं करते।
उदाहरण: How Child Paths Are Relative
// Run in your local React project (npm install required)
import { Routes, Route, Outlet } from 'react-router-dom';
function DashboardLayout() { return <div><h2>Dashboard</h2><Outlet /></div>; }
function Overview() { return <p>Overview (default)</p>; }
function Settings() { return <p>Settings</p>; }
function AppRoutes() {
return (
<Routes>
<Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<Overview />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Outlet के साथ Children Render करना
Parent route के element में कहीं <Outlet /> component शामिल होना चाहिए — यह वह placeholder है जहां React Router जो भी child route currently match करे उसे inject करता है।
इसके बिना, child routes successfully match होंगे लेकिन screen पर actually appear होने के लिए कहीं नहीं होगा।
उदाहरण: Rendering Children with Outlet
// Run in your local React project (npm install required)
import { Outlet } from 'react-router-dom';
function DashboardLayout() {
return (
<div>
<nav>Sidebar</nav>
<main><Outlet /></main>
</div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Parent route के element में <Outlet /> render करना भूल जाना, इसलिए child routes के पास appear होने के लिए कहीं नहीं है।
- <Route> elements को nest करना यह realize किए बिना कि child paths default रूप से parent के relative होते हैं।
- Parent layout के JSX को nesting से share करने के बजाय हर child के अंदर duplicate करना।
- Nested routes एक Route को दूसरे Route के layout के अंदर render करने देते हैं, common UI जैसे एक sidebar share करते हुए।
- Child <Route> elements एक parent <Route> के अंदर declared होते हैं, एक tree बनाते हुए।
- Parent के element में <Outlet /> शामिल होना चाहिए जो भी child route currently match करे उसे दिखाने के लिए।
- Child route paths default रूप से इनके parent के path से relative होते हैं।
npm install react-router-dom (v6 nested-route syntax दिखाई गई) चाहिए — इस sandbox में CDN से available नहीं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: