রিয়াক্ট রাউটারে রুটের জন্য ডাটা লোডার

গত পাঠে আমরা দোকান থেকে পণ্যের তথ্য বের করেছিলাম। এখন এই তথ্য রুট এলিমেন্টে লোড করতে হবে। এর জন্য লোডার (loader) ফাংশন ব্যবহার করা হয়। এখন আমরা এটি তৈরি করব।

root.jsx খুলুন, এখানে forStorage.js থেকে getProducts ইম্পোর্ট করার লাইন যোগ করুন:

routes/root.jsximport { getProducts } from '../forStorage'

ইম্পোর্ট লাইনের পরেই এবং Root ফাংশনের আগে loader ফাংশনের কোড লিখব, যা getProducts এর মাধ্যমে দোকান থেকে আমাদের পণ্যের তথ্য ফেরত দেবে। সাধারণত এই ধরনের ফাংশন আলাদা ফাইলে লেখা উচিত, কিন্তু আমরা একটু আলস্য করব, তাই সতর্কতায় মনোযোগ দিবেন না:

routes/root.jsxexport async function loader() {
  const products = await getProducts();
  return { products };
}

এখন আমাদের লোডারকে main.jsx-এ ইম্পোর্ট করা যাক। এই লোডারটি আমাদের জন্য রুটের হবে, তাই এটির নাম rootLoader রাখব:

main.jsximport Root, { loader as rootLoader } from './routes/root';

এবং এটিকে আমাদের রুট অবজেক্টে loader প্রপার্টিতে যোগ করুন:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    loader: rootLoader,
    children: [
      {
        path: 'products/:productId',
        element: <Product />,
      },
    ],
  },
]);