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 div দিয়ে র‍্যাপ করুন এবং রুট রুটের লেআউটে nav ট্যাগ বন্ধ করার পর শেষে যোগ করুন, এবং পুরো কাঠামোটি আরও একটি #main div দিয়ে র‍্যাপ করুন:

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;
}