Rutt utan sökväg i React Router

I den här lektionen kommer vi att titta på ytterligare en användbar egenskap hos rutter utan sökväg.

Du vet att för varje ruttobjekt kan du lägga till egenskapen errorElement och som värde sätta det element som du vill visa när ett fel uppstår.

Men tänk om vårt errorElement skulle vara samma för alla rutter? Man kan, så klart, sätta samma sak för varje, eller så kan man använda en rutt utan sökväg, och omsluta de barnrutter vi är intresserade av i den. Då, om ett fel uppstår i någon av dem, kommer vår rutt utan sökväg att fånga dem och visa sitt errorElement.

Låt oss gå in i filen main.jsx och omsluta alla våra barnrutter i en rutt utan sökväg, och göra dem till dess barn (i sin tur kommer denna rutt att bli ett barn till rotrutten), glöm inte att också lägga till egenskapen errorElement till 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,
					},
				],
			},
		],
	},
]);

Hur kan vi nu kontrollera att den här koden fungerar? Man kan lägga till en rad som kastar ett fel (glöm inte att ta bort den sedan, när du har kontrollerat). Låt oss till exempel lägga till den som första rad i funktionen action för rutten som tar bort produkt, då kommer vi att se ett fel när vi försöker ta bort en produkt:

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

Försök nu att ta bort någon produkt.

Ta applikationen du skapade i uppgifterna till tidigare lektioner. Använd lektionens material och omslut dina barnrutter i en rutt utan sökväg med egenskapen errorElement och kontrollera att det fungerar.