React Router-এ ইনডেক্স রুট

এই পাঠে আমরা জানব ইনডেক্স রুট কি।

প্রথমে আসুন একটি বিষয় লক্ষ্য করি কি। যখন আমরা হোমপেজে থাকি, তখন ডানদিকে আমরা খালি স্ক্রিন দেখি। কারণ কোন চাইল্ড রুট ঠিকানা /-এর সাথে মেলে না, আর এই ক্ষেত্রে কী প্রদর্শন করতে হবে তা আমরা বলিনি। এই ক্ষেত্রে, একটি খালি পৃষ্ঠা প্রদর্শন না করতে, আমরা ইনডেক্স রুট ব্যবহার করতে পারি - এটি একটি চাইল্ড রুট যার কোন পাথ নেই, এবং এর এলিমেন্ট প্যারেন্ট Outlet-এ প্রদর্শিত হয় যখন চাইল্ড সেটের কোনটিই মেলে না। এই ধরনের রুট ব্যবহার করে আমরা যেকোনো তথ্য, বা পরিসংখ্যান, বা অন্য অনুরূপ কিছু রাখতে পারি। সাধারণ রুটের মতোই এগুলি ডেটা লোড করার জন্য ব্যবহার করা যেতে পারে।

আসুন routes ফোল্ডারে index.jsx ফাইল তৈরি করি এবং এতে Index কম্পোনেন্ট তৈরি করি:

export default function Index() {
	return (
		<div>
			<p>হাই, React Router!</p>
			<p>এটি আমার পণ্যগুলির জন্য একটি অ্যাপ্লিকেশন :)</p>
		</div>
	);
}

এখন main.jsx-এ যাই এবং সেখানে আমাদের কম্পোনেন্ট Index ইম্পোর্ট করি:

import Index from './routes/index';

এবং children অ্যারের প্রথম এলিমেন্ট হিসেবে একটি অবজেক্ট যোগ করি, যেখানে index প্রপার্টি true-এ সেট করা, এবং প্রদর্শনের এলিমেন্ট হিসেবে আমাদের Index কম্পোনেন্ট থাকবে:

{ index: true, element: <Index /> },

আপনি আগের পাঠের অ্যাসাইনমেন্টে তৈরি করা অ্যাপ্লিকেশনটি নিন। পাঠের উপকরণ ব্যবহার করে, হোমপেজের ঠিকানায় একটি ইনডেক্স রুট যোগ করুন কিছু টেক্সট সহ।