React Router-এ পাথবিহীন রুট

এই পাঠে আমরা পাথবিহীন রুটের আরও একটি দরকারী বৈশিষ্ট্য নিয়ে আলোচনা করব।

আপনি জানেন যে প্রতিটি রুট অবজেক্টের জন্য আপনি errorElement প্রপার্টি যোগ করতে পারেন এবং এর মান হিসেবে সেই এলিমেন্টটি সেট করতে পারেন যেটি আপনি ত্রুটি ঘটলে প্রদর্শন করতে চান।

কিন্তু যদি আমাদের জন্য errorElement সব রুটের জন্য একই হয়? অবশ্যই, প্রতিটির জন্য একই জিনিস লিখতে পারেন, অথবা আপনি পাথবিহীন রুট ব্যবহার করে, আমাদের আগ্রহের চাইল্ড রুটগুলিকে এটির মধ্যে র্যাপ করতে পারেন। তাহলে তাদের মধ্যে任何一个 ত্রুটি ঘটলে, আমাদের পাথবিহীন রুট সেগুলি ক্যাচ করবে এবং এর নিজস্ব errorElement প্রদর্শন করবে।

চলুন main.jsx ফাইলে যাই এবং আমাদের সব চাইল্ড রুটগুলিকে একটি পাথবিহীন রুট দিয়ে র্যাপ করি, সেগুলিকে এর চাইল্ড বানিয়ে (আবার এই রুটটি হবে রুট রুটের চাইল্ড), এটিতে errorElement প্রপার্টিও যোগ করতে ভুলবেন না:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        errorElement: <ErrorPage404 />,
        children: [
          { index: true, element: <Index /> },
          {
            path: 'products/:productId',
            element: <Product />,
            loader: productLoader,
          },
          {
            path: 'products/:productId/edit',
            element: <EditProduct />,
            loader: editProductLoader,
            action: editAction,
          },
          {
            path: 'products/:productId/delete',
            action: deleteAction,
          },
        ],
      },
    ],
  },
]);

এখন এই কোডের কাজ কীভাবে পরীক্ষা করবেন? ত্রুটি নিক্ষেপ করার জন্য একটি লাইন যোগ করা যেতে পারে (পরীক্ষা করার পর এটিকে সরিয়ে ফেলতে ভুলবেন না)। উদাহরণস্বরূপ, চলুন পণ্য মুছে ফেলার রুটের action ফাংশনের প্রথম লাইন হিসেবে এটি যোগ করি, তাহলে পণ্য মুছতে尝试 করলে আমরা ত্রুটি দেখতে পাব:

delete.jsxexport async function action({ params }) {
  throw new Error('error');
  await deleteProduct(params.productId);
  return redirect('/');
}

এখন একটি পণ্য মুছতে尝试 করুন।