React Router-тегі жолсыз маршрут

Бұл сабақта біз жолсыз маршруттың тағы бір пайдалы қасиетін қарастырамыз.

Сіз білесіз, әрбір маршрут объектісі үшін errorElement қасиетін қоса аласыз және мәні ретінде қате орын алған кезде көрсеткіңіз келетін элементті орната аласыз.

Бірақ егер бізде errorElement барлық маршруттар үшін бірдей болса? Әрине, әр біріне бірдей нәрсені қоса аламыз, немесе жолсыз маршрутты пайдаланып, бізге қажетті бала маршруттарды оған орай аламыз. Сонда олардың бірінде қате орын алған кезде, біздің жолсыз маршрутымыз оны ұстап, өз errorElement-ін көрсетеді.

main.jsx файлына кірейік және барлық бала маршруттарды жолсыз маршрутқа орап, оларды оның баласы етейік (өз кезегінде бұл маршрут түбірлік маршруттың баласы болады), сонымен қатар оған 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,
					},
				],
			},
		],
	},
]);

Енді бұл кодтың жұмысын қалай тексеруге болады? Қата тастайтын жолды қосуға болады (тексергеннен кейін оны жоюды ұмытпаңыз). Мысалы, оны өнімді жою маршруты үшін action функциясына бірінші жол ретінде қосамыз, сонда өнімді жоюға әрекеттенген кезде біз қатені көреміз:

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

Енді кез келген өнімді жоюға әрекеттеніп көріңіз.

Алдыңғы сабақтардың тапсырмаларында жасаған қолдануыңызды алыңыз. Сабақ материалын пайдаланып, бала маршруттарыңызды errorElement қасиеті бар жолсыз маршрутқа орап, оның жұмыс істейтінін тексеріңіз.