Ruta fără cale în React Router

În această lecție vom analiza încă o proprietate utilă a rutei fără cale.

Știți că pentru fiecare obiect de rută puteți adăuga proprietatea errorElement și ca valoare să setați elementul pe care doriți să îl afișați în cazul apariției unei erori.

Dar dacă errorElement va fi același pentru toate rutele? Se poate, desigur, să-l adăugăm același lucru pentru fiecare, sau putem folosi o rută fără cale, să împachetăm în ea rutele copil care ne interesează. Atunci în cazul apariției unei erori pe una dintre ele, ruta noastră fără cale le va prinde și va afișa propriul său errorElement.

Să mergem în fișierul main.jsx și să împachetăm într-o rută fără cale toate rutele noastre copil, făcându-le copii ale acesteia (la rândul său această rută va deveni copilă a rutei de bază), să nu uităm să-i adăugăm și proprietatea 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,
					},
				],
			},
		],
	},
]);

Cum putem verifica acum funcționarea acestui cod? Putem adăuga o linie care aruncă o eroare (nu uitați să o eliminați mai târziu, când verificați). Să adăugăm, de exemplu, ca primă linie în funcția action pentru ruta de ștergere a produsului, atunci când încercăm să ștergem un produs vom vedea eroarea:

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

Acum încercați să ștergeți un produs.

Luați aplicația creată de dvs. în sarcinile din lecțiile anterioare. Folosind materialele lecției, împachetați rutele dvs. copil într-o rută fără cale cu proprietatea errorElement și verificați că funcționează.