Roete sonder pad in React Router

In hierdie les sal ons nog een nuttige eienskap van 'n roete sonder pad ondersoek.

Jy weet dat vir elke roetevoorwerp jy die eienskap errorElement kan byvoeg en as waarde die element stel wat jy wil vertoon wanneer 'n fout voorkom.

Maar wat as ons errorElement dieselfde sal wees vir alle roetes? Ons kan, weliswaar, dieselfde een vir elkeen aansit, of ons kan 'n roete sonder pad gebruik, en die kinderoetes waarin ons belangstel daarin toedraai. Dan, in die geval van 'n fout op een van hulle, sal ons roete sonder pad dit vang en sy errorElement vertoon.

Laat ons in die main.jsx lêer gaan en al ons kinderoetes in 'n roete sonder pad toedraai, en hulle kinders daarvan maak (op sy beurt sal hierdie roete 'n kind word van die wortel), ons moet ook nie vergeet om vir hom die eienskap errorElement by te voeg nie:

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,
					},
				],
			},
		],
	},
]);

Hoe kan ons nou die werk van hierdie kode toets? Ons kan 'n lyn byvoeg wat 'n fout gooi (moet nie later vergeet om dit te verwyder nie, wanneer jy getoets het). Kom ons byvoorbeeld, voeg dit as die eerste lyn in die funksie action vir die roete van die verwydering van die produk by, dan sal ons met die poging om die produk te verwyder 'n fout sien:

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

Probeer nou om een of ander produk te verwyder.

Neem die toepassing wat jy in die opdragte vir vorige lesse geskep het. Gebruik die materiaal van die les, draai jou kinderoetes in 'n roete sonder pad met die eienskap errorElement en toets, dat dit werk.