React Router में नेस्टेड रूट
इस पाठ में हम नेस्टेड रूट से परिचित होंगे। उस एप्लिकेशन को लॉन्च करें जो हमने पिछले पाठ में बनाया था। लिंक पर क्लिक करके, हम उत्पाद के साथ एक अलग पेज पर पहुंचते हैं। मान लीजिए कि हमारे लिए यह सुविधाजनक नहीं है, और हम चाहेंगे कि उत्पादों की सूची और उत्पाद पेज एक साथ, एक ही स्क्रीन पर दिखाई दें ताकि यह अधिक स्पष्ट हो। चलिए इसे इस तरह बनाते हैं।
इसके लिए, आइए main.jsx फ़ाइल खोलें
और बस उत्पाद पेज के लिए हमारे रूट को रूट रूट का
चाइल्ड रूट बना दें या, दूसरे शब्दों में, इसे
रूट रूट में "नेस्ट" कर दें। इसके लिए हम
रूट ऑब्जेक्ट की एक और प्रॉपर्टी
children का उपयोग करेंगे:
const router = createBrowserRouter([
{
path: '/',
element: <Root />,
errorElement: <ErrorPage404 />,
children: [
{
path: 'products/:productId',
element: <Product />,
},
],
},
]);
हम फिर से लिंक पर क्लिक करते हैं, लेकिन उत्पादों की सूची के दाईं ओर हमें कुछ भी दिखाई नहीं देता। इसका कारण यह है कि हमने रूट रूट को यह नहीं बताया कि हम उसके चाइल्ड रूट्स को कहाँ रेंडर करवाना चाहते हैं।
पैरेंट रूट में चाइल्ड रूट्स के एलिमेंट्स को रेंडर करवाने के लिए ही कंपोनेंट
Outlet हमारी मदद करेगा। आइए इसे लाइब्रेरी से
रूट रूट की फ़ाइल में इम्पोर्ट करें:
import { Outlet } from 'react-router-dom';
फिर इसे एक डिव #product में रैप करें
और रूट रूट के लेआउट में
nav टैग के बाद जोड़ दें,
और पूरी संरचना को एक और डिव #main में रैप कर दें:
return (
<div id="main">
<nav>
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
</nav>
<div id="product">
<Outlet />
</div>
</div>
);
लिंक पर क्लिक करके, अब हम देखते हैं उत्पादों की सूची और उत्पाद पेज दोनों।
आइए अपनी
index.css फ़ाइल में कुछ स्टाइल जोड़ें:
h1, h2 {
margin: 0;
}
div#main {
display: flex;
margin: 20px;
}
div#product {
margin-left: 40px;
}
पिछले पाठ के असाइनमेंट में आपके द्वारा बनाए गए एप्लिकेशन को लें। पाठ की सामग्री का उपयोग करके, छात्र पेज के लिए रूट को रूट रूट में नेस्टेड बनाएं।
और अब ऐसा करें कि लिंक पर क्लिक करने से स्क्रीन पर छात्रों की सूची और छात्र पेज दोनों दिखाई दें।
