გზის გარეშე მარშრუტი 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('/');
}

ახლა სცადეთ რაიმე პროდუქტის წაშლა.