Ruta bez putanje u React Router

U ovoj lekciji ćemo razmotriti još jedno korisno svojstvo rute bez putanje.

Znate da za svaki objekat rute možete dodati svojstvo errorElement i kao vrednost postaviti taj element koji želite da prikazujete u slučaju pojave greške.

Ali šta ako će nam errorElement biti isti za sve rute? Možemo, naravno, navući isto za svaku, a možemo iskoristiti rutu bez putanje, obmotati njom interesantne podređene rute. Tada u slučaju pojave greške na nekoj od njih, naša ruta bez putanje će ih uhvatiti i prikazati svoj errorElement.

Hajdemo u main.jsx fajl i obmotajmo rutom bez putanje sve naše podređene rute, čineći ih podređenim za nju (zauzvrat ova ruta će postati podređena za korensku), ne zaboravimo da joj takođe dodamo svojstvo 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,
					},
				],
			},
		],
	},
]);

Kako sada proveriti rad ovog koda? Možete dodati liniju sa bacanjem greške (ne zaboravite je kasnije ukloniti, kada proverite). Hajde, na primer, dodajmo je kao prvu liniju u funkciju action za rutu brisanja proizvoda, tada ćemo pri pokušaju brisanja proizvoda videti grešku:

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

Sada pokušajte da obrišete neki proizvod.

Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Koristeći materijale lekcije, obmotajte vaše podređene rute u rutu bez putanje sa svojstvom errorElement i proverite da li to radi.