Pot brez poti v React Router

V tej lekciji bomo obravnavali še eno uporabno lastnost poti brez poti.

Veste, da lahko vsakemu objektu poti dodate lastnost errorElement in kot vrednost nastavite element, ki ga želite prikazati ob pojavu napake.

Toda kaj pa, če bo errorElement enak za vse poti? Seveda lahko dodamo enako lastnost vsaki poti, lahko pa uporabimo pot brez poti, v katero zavijemo naše podrejene poti. Takrat bo v primeru napake na eni od njih, naša pot brez poti te napake ujela in prikazala svoj errorElement.

Pojdimo v datoteko main.jsx in zavijemo vse naše podrejene poti v pot brez poti, tako da postanejo njegove podrejene poti (ta pot bo sama postala podrejena korenski poti), ne pozabimo dodati tudi lastnost 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 zdaj preveriti delovanje te kode? Lahko dodamo vrstico z vrženjem napake (ne pozabite jo nato odstraniti, ko boste preverili). Dajmo, na primer, dodajmo jo kot prvo vrstico v funkcijo action za pot brisanja izdelka, takrat bomo ob poskusu brisanja izdelka videli napako:

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

Zdaj poskusite izbrisati kakšen izdelek.

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva iz lekcije, zavijte vaše podrejene poti v pot brez poti z lastnostjo errorElement in preverite, da deluje.