Ruta bez putanje u React Router

U ovoj lekciji ćemo razmotriti još jedno korisno svojstvo rute bez putanje.

Znate da za svaki objekat rute možete dodati svojstvo errorElement i kao vrednost postaviti taj element koji želite da prikazujete u slučaju pojave greške.

Ali šta ako će nam errorElement biti isti za sve rute? Možemo, naravno, navući isto za svaku, a možemo iskoristiti rutu bez putanje, obmotati njom interesantne podređene rute. Tada u slučaju pojave greške na nekoj od njih, naša ruta bez putanje će ih uhvatiti i prikazati svoj errorElement.

Hajdemo u main.jsx fajl i obmotajmo rutom bez putanje sve naše podređene rute, čineći ih podređenim za nju (zauzvrat ova ruta će postati podređena za korensku), ne zaboravimo da joj takođe dodamo svojstvo 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,
          },
        ],
      },
    ],
  },
]);

Kako sada proveriti rad ovog koda? Možete dodati liniju sa bacanjem greške (ne zaboravite je kasnije ukloniti, kada proverite). Hajde, na primer, dodajmo je kao prvu liniju u funkciju action za rutu brisanja proizvoda, tada ćemo pri pokušaju brisanja proizvoda videti grešku:

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

Sada pokušajte da obrišete neki proizvod.