React Router-da yo'lsiz marshrut

Ushbu darsda biz yo'lsiz marshrutning yana bir foydali xususiyatini ko'rib chiqamiz.

Siz bilasizki, har bir marshrut obyekti uchun errorElement xususiyatini qo'shishingiz mumkin va qiymat sifatida xato yuz berganda ko'rsatiladigan elementni o'rnatishingiz mumkin.

Lekin agar errorElement barcha marshrutlar uchun bir xil bo'lsa-chi? Albatta, har biriga bir xil narsani yozish mumkin, yoki yo'lsiz marshrutdan foydalanib, bizni qiziqtirgan bolalar marshrutlarini o'rab qo'yish mumkin. Shunda ulardan birida xato yuz berganda, bizning yo'lsiz marshrutimiz ularni ushlab, o'zining errorElement ni ko'rsatadi.

Keling, main.jsx fayliga kiraylik va barcha bolalar marshrutlarimizni yo'lsiz marshrutga o'rab qo'yaylik, ularni uning bolalari qilib (o'z navbatida bu marshrut ildiz marshrutning bolasi bo'ladi), shuningdek unga errorElement xususiyatini qo'shishni unutmaylik:

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

Endi ushbu kodning ishlashini qanday tekshirish mumkin? Xato otish qatorini qo'shish mumkin (tekshirgach uni olib tashlashni unutmang). Keling, masalan, uni mahsulotni o'chirish marshruti uchun action funktsiyasining birinchi qatori sifatida qo'shamiz, shunda mahsulotni o'chirishga urinishda biz xatoni ko'ramiz:

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

Endi biror mahsulotni o'chirishga harakat qiling.

Oldingi darslar uchun topshiriqlarda yaratgan ilovangizni oling. Dars materiallaridan foydalanib, bolalar marshrutlaringizni errorElement xususiyatiga ega bo'lgan yo'lsiz marshrutga o'rab qo'ying va bu ishlashini tekshiring.