Trasa bez ścieżki w React Router

W tej lekcji rozważymy jeszcze jedną przydatną właściwość trasy bez ścieżki.

Wiesz, że dla każdego obiektu trasy możesz dodać właściwość errorElement i jako wartość ustawić ten element, który chcesz wyświetlać w przypadku wystąpienia błędu.

Ale co, jeśli nasz errorElement będzie taki sam dla wszystkich tras? Można, oczywiście, powklejać to samo dla każdej, albo można skorzystać z trasy bez ścieżki, opakować w nią interesujące nas potomne trasy. Wtedy w przypadku wystąpienia błędu na jednej z nich, nasza trasa bez ścieżki będzie je przechwytywać i wyświetlać swój errorElement.

Wejdźmy do pliku main.jsx i opakujmy w trasę bez ścieżki wszystkie nasze potomne trasy, czyniąc je potomnymi dla niej (ta trasa stanie się z kolei potomna dla głównej), nie zapomnijmy dodać jej również właściwości 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,
          },
        ],
      },
    ],
  },
]);

Jak teraz sprawdzić działanie tego kodu? Można dodać linijkę z rzuceniem błędu (nie zapomnij jej później usunąć, gdy sprawdzisz). Dodajmy, na przykład, jako pierwszą linię w funkcji action dla trasy usuwania produktu, wtedy przy próbie usunięcia produktu zobaczymy błąd:

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

Teraz spróbuj usunąć jakiś produkt.