React Router-এ ডেটা সম্পাদনার জন্য রুট তৈরি করা

গত পাঠে আমরা একটি পৃথক React কম্পোনেন্ট EditProduct-এ সম্পাদনার জন্য একটি ফর্ম তৈরি করেছি।

এখনই আমদানির পরেই একটি নতুন রুটের জন্য লোডার ফাংশন লিখি এবং EditProduct ফাংশনের আগে। এটি product.jsx-এর মতোই হবে। ফাংশনে URL প্যারামিটার পাস করা হবে এবং তারপর আমরা এর দ্বারা পণ্য পাব id:

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

forStorage.js থেকে getProduct আমদানি করি:

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

এখন আমরা আমাদের main.jsx খুলব এবং আমরা যে কম্পোনেন্ট তৈরি করেছি তা আমদানি করব EditProduct এবং লোডার:

main.jsximport EditProduct, { loader as editProductLoader } from './routes/edit';

তারপর children অ্যারে में পণ্য রুটের পরেই সম্পাদনার জন্য একটি রুট অবজেক্ট যোগ করি:

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

এখন অ্যাপ্লিকেশন চালু করি, একটি পণ্য তৈরি করি, এটিতে ক্লিক করি, তারপর এডিট বাটনে ক্লিক করি এবং আমাদের ফর্মটি দেখতে পাব।

শুধু一件事, আমাদের আরও করতে হবে যাতে ফর্মের ফিল্ডগুলিতে সম্পাদনার আগে বর্তমান ডেটা লোড করা হয়। এর জন্য আমরা edit.jsx-তে হুক useLoaderData আমদানি করব:

routes/edit.jsximport { Form, useLoaderData } from 'react-router-dom';

এবং EditProduct ফাংশনে লোডার থেকে ডেটা পেতে এটি প্রয়োগ করব। return কমান্ডের আগে এটি যোগ করি:

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

এখন প্রতিটি ইনপুট ট্যাগে defaultValue অ্যাট্রিবিউট যোগ করি প্রতিটি ইনপুটের জন্য সংশ্লিষ্ট মানসহ। উদাহরণস্বরূপ, প্রথম ইনপুটটি এখন এইরকম দেখাবে:

routes/edit.jsx<input
  placeholder="name"
  type="text"
  name="name"
  defaultValue={product.name}
/>

বাকি দুটি ইনপুটের মান হবে যথাক্রমে 'product.cost' এবং 'product.amount'। যদিও এখনও ফর্মে আমাদের কোন ডেটা নেই।