React Router-এ রাউট

রাউট (Routes) হল React Router-এ তৈরী অ্যাপ্লিকেশনের সবচেয়ে গুরুত্বপূর্ণ অংশ। আগের পাঠ থেকে কোডের একটি অংশ দেখা যাক:

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

তো, path এবং element প্রপার্টিগুলো, যেগুলো আমরা রাউটার তৈরির সময় ফাংশনে পাস করেছি, সেগুলোই হল Route অবজেক্টের প্রপার্টি। আসলে, এই অবজেক্টের অনেকগুলো প্রপার্টি রয়েছে, সেগুলো অফিসিয়াল ডকুমেন্টেশন-এ খুঁজে পাওয়া যাবে। ভবিষ্যতে, এর মধ্যে কিছু প্রপার্টি আমাদের কাজে লাগবে:

jsxinterface RouteObject {
  path?: string;
  index?: boolean;
  children?: React.ReactNode;
  caseSensitive?: boolean;
  id?: string;
  loader?: LoaderFunction;
  action?: ActionFunction;
  element?: React.ReactNode | null;
  Component?: React.ComponentType | null;
  errorElement?: React.ReactNode | null;
  ErrorBoundary?: React.ComponentType | null;
  handle?: RouteObject["handle"];
  shouldRevalidate?: ShouldRevalidateFunction;
  lazy?: LazyRouteFunction<RouteObject>;
}

জেএসএক্স স্টাইলের বিকল্প ব্যবহার করা যেত এবং Route কম্পোনেন্টের জন্য প্রপ্স আকারে প্রপার্টিগুলো লিখতে পারতেন, তাহলে আমাদের কোডের অংশটি এভাবে দেখাত:

main.jsxconst router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path = '/'
      element = {<div>Hello Router!</div>}
    />
  )
);

এবং, অবশ্যই, ইম্পোর্টে আরও কয়েকটি লাইন যোগ করতে হত:

main.jsximport {
  createRoutesFromElements,
  createBrowserRouter,
  RouterProvider,
  Route,
} from 'react-router-dom';

পাঠে উল্লিখিত উভয় স্টাইলই সমতুল্য। ভবিষ্যতে, আমরা প্রথম বিকল্পটি মেনে চলব।