Útvonal útvonal nélkül a React Routerben

Ezen a leckén megvizsgáljuk az útvonal útvonal nélkül még egy hasznos tulajdonságát.

Tudja, hogy minden útvonalobjektumhoz hozzáadhatja a errorElement tulajdonságot és értéknek beállíthatja azt az elemet, amit meg szeretne jeleníteni hiba esetén.

De mi van, ha a errorElement ugyanaz lesz minden útvonalhoz? Lehetne természetesen mindegyikhez ugyanazt beilleszteni, de használhatjuk az útvonal útvonal nélkül is, becsomagolva abba a minket érdeklő gyermek útvonalakat. Akkor hiba esetén bármelyikükön, az útvonalunk útvonal nélkül elkapja azokat és megjeleníti a saját errorElement-jét.

Menjünk a main.jsx fájlba és csomagoljuk be az útvonal útvonal nélkül minden gyermek útvonalunkat, ezeket gyermekévé téve (viszont ez az útvonal lesz a gyermeke a gyökérelemnek), ne felejtsük el hozzáadni neki a errorElement tulajdonságot is:

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,
					},
				],
			},
		],
	},
]);

Hogyan ellenőrizhetjük most ennek a kódnak a működését? Hozzáadhatunk egy sort egy hiba dobásával (ne felejtsd el később eltávolítani, ha ellenőrizted). Tegyük fel például, hozzáadjuk első sorként a függvényben a action-hez a termék törlésének útvonalához, akkor amikor megpróbáljuk törölni a terméket, megjelenik a hiba:

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

Most próbálj meg törölni egy terméket.

Vegye azt az alkalmazást, amit az előző leckékhez szóló feladatokban készített. A lecke anyagait használva, csomagolja be a gyermek útvonalait egy útvonal útvonal nélkül-be a errorElement tulajdonsággal és ellenőrizze, hogy ez működik.