React Router-এ URL প্যারামিটার থেকে লোডার ডেটা পাওয়া

গত পাঠে, আমরা পণ্য পৃষ্ঠার ডেটা পাওয়ার জন্য একটি ফাংশন লিখেছিলাম, চলুন product.jsx ফাইলে getProduct ইম্পোর্ট করি:

routes/product.jsximport { getProduct } from '../forStorage';

ইম্পোর্টের পরেই এবং Product ফাংশনের আগে অবিলম্বে loader ফাংশনটি লিখি। এতে URL প্যারামিটার পাস করি:

routes/product.jsxexport async function loader({ params }) {
  const product = await getProduct(params.productId);
  return { product };
}

লোডার দ্বারা প্রাপ্ত ডেটা ব্যবহার করার জন্য useLoaderData হুকটিও ইম্পোর্ট করি:

routes/product.jsximport { useLoaderData } from 'react-router-dom';

useLoaderData প্রয়োগ করি, সেই অনুযায়ী Product ফাংশনের শুরুতে product অবজেক্ট তৈরি করার লাইনটি নিম্নলিখিত দিয়ে প্রতিস্থাপন করি:

routes/product.jsxconst { product } = useLoaderData();

এবং, অবশ্যই, আমাদের মার্কআপটি একটু পরিবর্তন করব, যেহেতু আমরা পুরানো অবজেক্ট product সরিয়ে দিয়েছি। অনুচ্ছেদের বিষয়বস্তু প্রতিস্থাপন করি:

routes/product.jsx<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

নিম্নলিখিত দিয়ে:

routes/product.jsx<p>Name: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Amount: {product.amount ? product.amount : <i>unknown</i>}</p>

আমাদের main.jsx খোলা বাকি আছে এবং সেখানে loader ইম্পোর্ট যোগ করতে হবে, এটির নাম দিই productLoader:

main.jsximport Product, {
  loader as productLoader,
} from './routes/product';

এবং পণ্য পৃষ্ঠার রুট অবজেক্টের জন্য এটিকে লোডার হিসেবে নির্দিষ্ট করতে হবে, element প্রপার্টির পরে children-এ এটিকে যোগ করি:

main.jsxchildren: [
  {
    path: 'products/:productId',
    element: <Product />,
    loader: productLoader,
  },
],

এটাই, পণ্য পৃষ্ঠার জন্য ডেটা লোড করার সাথে আমরা পরিচিত হয়েছি! যদিও, আমাদের এখনই লোড করার কিছু নেই। অ্যাপ্লিকেশনটি চালু করুন, পণ্য যোগ করুন এবং সেগুলি তালিকায় ক্লিক করে দেখুন যাতে নিশ্চিত হতে পারেন যে সবকিছু কাজ করছে।