React Router-এ রুট রুট তৈরি করা

প্রায়শই মূল রুট, যা হোমপেজে নিয়ে যায়, তাকে রুট রুট (root route) বলা হয়, কারণ অন্যান্য রুটগুলি এর ভিতরে রেন্ডার হবে। এটিকে একটি পৃথক কম্পোনেন্ট হিসেবে উপস্থাপন করা খুবই সুবিধাজনক। সুতরাং আসুন আবার আমাদের অ্যাপ্লিকেশনটি নিই এবং src ফোল্ডারে আরও একটি ফোল্ডার তৈরি করি এবং এটির নাম দিই routes। এখন এই ফোল্ডারে root.jsx ফাইল তৈরি করব একটি পৃথক React কম্পোনেন্ট Root-এর জন্য। ফাইলের কোডটি এইরকম দেখাবে:

function Root() {
	return <div>Hello Router!</div>;
}

export default Root;

এবং এখন main.jsx ফাইলের কোডের অংশটিতে পরিবর্তন করা যাক, কারণ element-এর মান হিসেবে আমরা এখন Root কম্পোনেন্ট পাস করব, এবং এর বিষয়বস্তু এখন একটি পৃথক ফাইল root.jsx-এ রয়েছে:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
	},
]);

main.jsx-এ আমাদের কম্পোনেন্টের ইম্পোর্ট লাইনটি ভুলবেন না:

import Root from './routes/root';

আপনি পূর্ববর্তী পাঠের অ্যাসাইনমেন্টে তৈরি করা অ্যাপ্লিকেশনটি খুলুন। রুট রুটের জন্য একটি পৃথক React কম্পোনেন্ট Root একটি পৃথক ফাইল root.jsx-এ তৈরি করুন, যেমন এই পাঠে বর্ণিত হয়েছে। আপনার main.jsx-এ পরিবর্তনগুলি আনুন।