React Router में नेस्टेड रूट

इस पाठ में हम नेस्टेड रूट से परिचित होंगे। उस एप्लिकेशन को लॉन्च करें जो हमने पिछले पाठ में बनाया था। लिंक पर क्लिक करके, हम उत्पाद के साथ एक अलग पेज पर पहुंचते हैं। मान लीजिए कि हमारे लिए यह सुविधाजनक नहीं है, और हम चाहेंगे कि उत्पादों की सूची और उत्पाद पेज एक साथ, एक ही स्क्रीन पर दिखाई दें ताकि यह अधिक स्पष्ट हो। चलिए इसे इस तरह बनाते हैं।

इसके लिए, आइए main.jsx फ़ाइल खोलें और बस उत्पाद पेज के लिए हमारे रूट को रूट रूट का चाइल्ड रूट बना दें या, दूसरे शब्दों में, इसे रूट रूट में "नेस्ट" कर दें। इसके लिए हम रूट ऑब्जेक्ट की एक और प्रॉपर्टी children का उपयोग करेंगे:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    children: [
      {
        path: 'products/:productId',
        element: <Product />,
      },
    ],
  },

]);

हम फिर से लिंक पर क्लिक करते हैं, लेकिन उत्पादों की सूची के दाईं ओर हमें कुछ भी दिखाई नहीं देता। इसका कारण यह है कि हमने रूट रूट को यह नहीं बताया कि हम उसके चाइल्ड रूट्स को कहाँ रेंडर करवाना चाहते हैं।

पैरेंट रूट में चाइल्ड रूट्स के एलिमेंट्स को रेंडर करवाने के लिए ही कंपोनेंट Outlet हमारी मदद करेगा। आइए इसे लाइब्रेरी से रूट रूट की फ़ाइल में इम्पोर्ट करें:

routes/root.jsximport { Outlet } from 'react-router-dom';

फिर इसे एक डिव #product में रैप करें और रूट रूट के लेआउट में nav टैग के बाद जोड़ दें, और पूरी संरचना को एक और डिव #main में रैप कर दें:

routes/root.jsxreturn (
  <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 फ़ाइल में कुछ स्टाइल जोड़ें:

index.cssh1, h2 {
  margin: 0;
}

div#main {
  display: flex;
  margin: 20px;
}

div#product {
  margin-left: 40px;
}