Route zonder pad in React Router

In deze les bekijken we nog een nuttige eigenschap van een route zonder pad.

Je weet dat je voor elk route-object de eigenschap errorElement kunt toevoegen en als waarde het element kunt instellen dat je wilt weergeven wanneer er een fout optreedt.

Maar wat als onze errorElement hetzelfde is voor alle routes? Je kunt natuurlijk voor elke route hetzelfde toevoegen, of je kunt gebruikmaken van een route zonder pad, daarin de voor ons interessante onderliggende routes wrappen. Dan, wanneer zich een fout voordoet in een van hen, zal onze route zonder pad deze opvangen en zijn eigen errorElement weergeven.

Laten we naar het main.jsx bestand gaan en alle onze onderliggende routes wrappen in een route zonder pad, waardoor ze onderliggend worden aan hem (op zijn beurt wordt deze route onderliggend aan de hoofdroute), vergeet niet om hem ook de eigenschap errorElement toe te voegen:

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 controleer je nu de werking van deze code? Je kunt een regel toevoegen die een fout veroorzaakt (vergeet niet hem later te verwijderen wanneer je hebt gecontroleerd). Laten we, bijvoorbeeld, hem als eerste regel toevoegen in de functie action voor de route voor het verwijderen van een product, dan zullen we bij een poging om een product te verwijderen een fout zien:

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

Probeer nu een willekeurig product te verwijderen.

Neem de applicatie die je hebt gemaakt in de opdrachten bij eerdere lessen. Gebruikmakend van de lesmaterialen, wrap je onderliggende routes in een route zonder pad met de eigenschap errorElement en controleer dat dit werkt.