Outlet Component की जानकारी
In this page:
function ParentLayout() {
return (
<div>
<header>Shared layout</header>
<Outlet context={sharedValue} />
</div>
);
}Outlet असल में क्या करता है
Outlet एक special component है जो parent route के rendered output के अंदर एक placeholder की तरह act करता है। JSX में जहां <Outlet /> appear होता है, React Router उस जगह वह child route element substitute कर देता है जो currently URL के बाकी हिस्से से match करता है।
उदाहरण: What Outlet Actually Does
// Run in your local React project (npm install required)
import { Outlet, Routes, Route } from 'react-router-dom';
function Layout() {
return <div><header>Site Header</header><Outlet /></div>;
}
function Page() { return <p>A page inside the layout</p>; }
function AppRoutes() {
return (
<Routes>
<Route path="/" element={<Layout />}>
<Route path="page" element={<Page />} />
</Route>
</Routes>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Matching Child के बिना Outlet कुछ नहीं Render करता
अगर current URL parent route से match करे लेकिन इसके अंदर कोई child route match न करे (उदाहरण के लिए, exactly /dashboard पर visit करना जब सिर्फ /dashboard/settings एक child के रूप में defined हो), Outlet बिलकुल कुछ render नहीं करता — surrounding layout अब भी दिखता है, सिर्फ एक empty content area के साथ।
उदाहरण: Outlet Renders Nothing Without a Matching Child
// Run in your local React project (npm install required)
import { Outlet, Routes, Route } from 'react-router-dom';
function Layout() { return <div><nav>Nav</nav><Outlet /></div>; }
function Home() { return <p>Default home content</p>; }
function AppRoutes() {
return (
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
</Route>
</Routes>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
context के साथ Outlet को Data Pass करना
Outlet एक optional context prop accept करता है, एक parent layout को data नीचे pass करने देते हुए जो भी child route currently render हो उसे। Child इसे वापस useOutletContext() hook के साथ पढ़ता है, इसके लिए अलग से React Context setup करने की ज़रूरत से बचते हुए।
उदाहरण: Passing Data to Outlet with context
// Run in your local React project (npm install required)
import { Outlet, useOutletContext } from 'react-router-dom';
function Layout() {
return <Outlet context={{ user: "Asha" }} />;
}
function Child() {
const { user } = useOutletContext();
return <p>Hello, {user}</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Outlet को children के साथ confuse करना — Outlet specifically nested ROUTES के लिए है, regular component composition के लिए नहीं।
- यह भूल जाना कि Outlet सिर्फ तब कुछ render करता है जब current URL के लिए actually-matching child route हो।
- एक layout में multiple <Outlet /> instances रखना हर एक में अलग content expect करते हुए — सिर्फ एक Outlet matched child render करता है।
- Outlet react-router-dom का एक component है जो एक parent route के element के अंदर उपयोग होता है।
- यह जो भी child route currently URL से match करे उसे, उसी जगह, render करता है।
- अगर कोई child route match न करे, Outlet कुछ नहीं render करता।
- यह वह mechanism है जो nested routing और shared layouts को possible बनाता है।
npm install react-router-dom चाहिए — इस sandbox में CDN से available नहीं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: