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

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

routes/root.jsxfunction Root() {
  return <div>Hello Router!</div>;
}

export default Root;

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

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

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

main.jsximport Root from './routes/root';