Trasa bez cesty v React Router

V tejto lekcii si ukážeme ešte jednu užitočnú vlastnosť trasy bez cesty.

Viete, že pre každý objekt trasy môžete pridať vlastnosť errorElement a ako hodnotu nastaviť ten element, ktorý chcete zobraziť pri výskyte chyby.

Ale čo ak bude errorElement rovnaký pre všetky trasy? Samozrejme, môžeme ho napísať pre každú zvlášť, alebo môžeme využiť trasu bez cesty, obaliť ňou naše podradené trasy. Potom v prípade výskytu chyby v niektorej z nich, naša trasa bez cesty ich zachytí a zobrazí svoj errorElement.

Poďme do súboru main.jsx a obaľme trasou bez cesty všetky naše podradené trasy, čím sa stanú jeho podradenými (naopak táto trasa sa stane podradenou koreňovej), nezabudnime jej pridať aj vlastnosť 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,
					},
				],
			},
		],
	},
]);

Ako teraz overiť fungovanie tohto kódu? Môžeme pridať riadok s vyvolaním chyby (nezabudnite ho potom odstrániť, keď overíte). Dajme napríklad pridať ako prvý riadok do funkcie action pre trasu odstránenia produktu, potom pri pokuse o odstránenie produktu uvidíme chybu:

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

Teraz skúste odstrániť nejaký produkt.

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcim lekciám. Použite materiály z lekcie a obaľte vaše podradené trasy trasou bez cesty s vlastnosťou errorElement a overte, že to funguje.