React Routerでのパスなしルート

このレッスンでは、パスなしルートのさらに別の便利な特性について検討します。

各ルートオブジェクトに対して、errorElementプロパティを追加でき、その値にはエラー発生時に表示したい要素を設定できることはご存知でしょう。

しかし、すべてのルートでerrorElementが同じである場合はどうでしょうか？もちろん、それぞれに同じものを設定することもできますが、パスなしルートを利用して、対象となる子ルートをその中にラップすることもできます。そうすれば、そのいずれかでエラーが発生した場合、パスなしルートがエラーを捕捉し、自身のerrorElementを表示します。

main.jsxファイルに移動し、すべての子ルートをパスなしルートでラップしてその子とします（このルート自体はルートの子になります）。errorElementプロパティも追加することを忘れないでください：

const 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関数の最初の行に追加してみましょう。そうすれば、製品を削除しようとしたときにエラーが表示されます：

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

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

過去のレッスンの課題で作成したアプリケーションを使用してください。このレッスンの内容を参考に、子ルートをerrorElementプロパティを持つパスなしルートでラップし、それが機能することを確認してください。