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('/');
}

Այժմ փորձեք ջնջել ինչ-որ ապրանք: