Rruga pa shteg në React Router

Në këtë mësim do të shqyrtojmë një tipar tjetër të dobishëm të rrugës pa shteg.

Ju e dini se për çdo objekt rruge mund të shtoni një pronë errorElement dhe si vlerë të vendosni atë element që dëshironi të shfaqni kur ndodh një gabim.

Por çka nëse errorElement do të jetë i njëjtë për të gjitha rrugët? Mundet, sigurisht ta përsërisni të njëjtën gjë për secilën, ose mund të përdorni një rrugë pa shteg, të mbështjellni brenda saj rrugët fëmijë që na interesojnë. Atëherë në rast se ndodh një gabim në njërën prej tyre, rruga jonë pa shteg do t'i kapë ato dhe do të shfaqë errorElement-in e saj.

Le të shkojmë në skedarin main.jsx dhe të mbështjellim të gjitha rrugët tona fëmijë brenda një rruge pa shteg, i bëjmë ato fëmijë të saj (nga ana tjetër kjo rrugë do të bëhet fëmijë e rrugës rrënjë), mos harrojmë t'i shtojmë asaj pronën 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,
					},
				],
			},
		],
	},
]);

Si të kontrolloni tani funksionimin e këtij kodi? Mund të shtoni një rresht me hedhjen e një gabimi (mos harroni ta hiqni më pas, kur ta kontrolloni). Le të, për shembull, e shtojmë atë si rreshtin e parë në funksionin action për rrugën e fshirjes së produktit, atëherë kur përpiqemi të fshijmë produktin do të shohim gabimin:

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

Tani përpiquni të fshini ndonjë produkt.

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të kaluara. Duke përdorur materialet e mësimit, mbështillni rrugët tuaja fëmijë në një rrugë pa shteg me pronën errorElement dhe kontrolloni që kjo funksionon.