Rute uden sti i React Router

I denne lektion vil vi overveje endnu en nyttig egenskab ved ruter uden sti.

Du ved, at for hver ruteobjekt kan du tilføje en egenskab errorElement og som værdi sætte det element, som du ønsker at vise, når der opstår en fejl.

Men hvad hvis vores errorElement er den samme for alle ruter? Man kunne selvfølgelig tilføje det samme for hver, eller man kunne bruge en rute uden sti, og indpakke de ønskede underruter i den. Så, i tilfælde af en fejl på en af dem, vil vores rute uden sti fange dem og vise dens errorElement.

Lad os gå ind i main.jsx filen og indpakke alle vores underruter i en rute uden sti, gøre dem til dens underruter (denne rute vil selv blive en underrute til roden), og husk at tilføje egenskaben errorElement til den:

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

Hvordan tester vi nu dette kode? Man kan tilføje en linje, der kaster en fejl (glem ikke at fjerne den bagefter, når du har testet). Lad os for eksempel tilføje den som første linje i funktionen action for sletningsruten for produktet, så når vi forsøger at slette produktet, vil vi se en fejl:

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

Prøv nu at slette et produkt.

Tag applikationen, som du oprettede i opgaverne til tidligere lektioner. Brug materialet fra lektionen, indpak dine underruter i en rute uden sti med egenskaben errorElement og kontroller, at det virker.