Route senza percorso in React Router

In questa lezione esamineremo un'altra utile caratteristica della route senza percorso.

Sai che per ogni oggetto route puoi aggiungere una proprietà errorElement e come valore impostare l'elemento che vuoi venga visualizzato quando si verifica un errore.

Ma cosa succede se il nostro errorElement è lo stesso per tutte le route? Potremmo certamente ripeterlo per ognuna, oppure possiamo utilizzare una route senza percorso, avvolgendovi all'interno le route figlie che ci interessano. In questo modo, in caso di errore in una di esse, la nostra route senza percorso le intercetterà e visualizzerà il suo errorElement.

Andiamo nel file main.jsx e avvolgiamo tutte le nostre route figlie in una route senza percorso, rendendole figlie di essa (a sua volta questa route diventerà figlia della route radice), non dimentichiamo di aggiungerle anche la proprietà 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,
					},
				],
			},
		],
	},
]);

Come verificare ora il funzionamento di questo codice? Possiamo aggiungere una riga che lancia un errore (non dimenticare di rimuoverla dopo, quando avrai verificato). Ad esempio, aggiungiamola come prima riga nella funzione action per la route di eliminazione del prodotto, così quando tentiamo di eliminare un prodotto vedremo l'errore:

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

Ora prova a eliminare un prodotto qualsiasi.

Prendi l'applicazione che hai creato nei compiti delle lezioni precedenti. Utilizzando il materiale della lezione, avvolgi le tue route figlie in una route senza percorso con la proprietà errorElement e verifica che funzioni.