Yolsuz Marsrut React Router-da

Bu dersde biz yolsuz marsrutun basqa bir faydali xususiyyetini muzakire edeceyik.

Bilirsiniz ki, her bir marsrut obyekti ucun siz errorElement xassesi elave ede bilersiniz ve deyer kimi xeta bas verdikde gosterilmesini istediyiniz elementi teyin ede bilersiniz.

Bes ya bizim butun marsrutlar ucun errorElement eyni olarsa? Hell edir, her biri ucun eyni seyi tekrarlaya bilerik, ya da yolsuz marsrutdan istifade ederek, bizi maraqlandiran usaq marsrutlari onun icine ala bilerik. O zaman onlardan her hansi birinde xeta bas verdikde, bizim yolsuz marsrutimiz onlari tutacaq ve oz errorElement-ni gosterecek.

Gelin main.jsx faylina daxil olaq ve butun usaq marsrutlarimizi yolsuz marsruta cevirerek, onlari onun usagları edek (oz novbesinde bu marsrut kok marsrutun usagı olacaq), ona hemcinin errorElement xassesini elave etmeyi unutmayaq:

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

Indi bu kodun islemesini necə yoxlamaq olar? Xeta atmaq ucun bir setir elave etmek olar (yoxladıqdan sonra onu silmeyi unutmayın). Meselen, gelin mehsulu silme marsrutu ucun action funksiyasina ilk setir kimi elave edek, o zaman mehsulu silmeye cehd ederken biz xetanı goreceyik:

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

Indi her hansi bir mehsulu silmeye cehd edin.

Onceki derslerin tapşırıqlarında yaratdığınız proqramı goturun. Ders materiallarından istifade ederek, usaq marsrutlarınızı errorElement xassesi olan yolsuz marsruta cevirin ve bunun istediyiniz kimi islediyini yoxlayın.