Маршрут без шляху ў 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('/');
}

Цяпер паспрабуйце выдаліць які-небудзь прадукт.