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 касиети менен жолсуз маршрут менен ороп койсоңуз болот жана бул иштегенин текшериңиз.