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

では、何らかの製品を削除してみてください。