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

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

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

import { getProducts } from '../forStorage'

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

export async function loader() {
	const products = await getProducts();
	return { products };
}

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

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

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

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

আপনি আগের পাঠের অ্যাসাইনমেন্টে তৈরি করা অ্যাপ্লিকেশনটি নিন। পাঠের উপকরণ ব্যবহার করে, root.jsx ফাইলে শিক্ষার্থীদের ডাটা লোড করার জন্য loader ফাংশন লিখুন এবং এটিকে main.jsx-এ রুট অবজেক্টে যোগ করুন।