Trasa bez cesty v React Router

V této lekci se podíváme na další užitečnou vlastnost trasy bez cesty.

Víte, že pro každý objekt trasy můžete přidat vlastnost errorElement a jako hodnotu nastavit prvek, který chcete zobrazit při výskytu chyby.

Ale co když bude errorElement stejný pro všechny trasy? Lze samozřejmě přidat to samé pro každou, nebo lze využít trasu bez cesty, obalit jí nás zajímající podřízené trasy. Pak v případě výskytu chyby na jedné z nich, naše trasa bez cesty je bude zachycovat a zobrazovat svůj errorElement.

Pojďme do souboru main.jsx a obalme trasou bez cesty všechny naše podřízené trasy, čímž z nich uděláme jeho podřízené (naopak tato trasa se stane podřízenou kořenové), nezapomeneme jí také přidat vlastnost 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,
					},
				],
			},
		],
	},
]);

Jak nyní ověřit fungování tohoto kódu? Lze přidat řádek s vyhozením chyby (nezapomeňte ji pak odstranit, až ověříte). Přidejme například jej jako první řádek do funkce action pro trasu odstranění produktu, pak při pokusu o odstranění produktu uvidíme chybu:

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

Nyní zkuste odstranit nějaký produkt.

Vezměte aplikaci, kterou jste vytvořili v úkolech k předchozím lekcím. Využijte materiály lekce, obalte vaše podřízené trasy v trasu bez cesty s vlastností errorElement a ověřte, že to funguje.