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 div দিয়ে র্যাপ করুন
এবং রুট রুটের লেআউটে
nav ট্যাগ বন্ধ করার পর শেষে যোগ করুন,
এবং পুরো কাঠামোটি আরও একটি
#main div দিয়ে র্যাপ করুন:
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;
}
আপনি গত পাঠের অ্যাসাইনমেন্টে তৈরি করা অ্যাপ্লিকেশনটি নিন। পাঠের উপকরণ ব্যবহার করে, ছাত্রের পৃষ্ঠার রুটটিকে রুট রুটের মধ্যে নেস্টেড করুন।
এবং এখন এমন করুন যাতে লিঙ্কে ক্লিক করলে স্ক্রিনে ছাত্রদের তালিকা এবং ছাত্রের পৃষ্ঠা উভয়ই দেখায়।
