React Routerда йўлсиз маршрут

Ушбу дарсда биз йўлсиз маршрутнинг яна бир фойдали хусусиятини кўриб чиқамиз.

Сиз биласизки, ҳар бир маршрут объекти учун сиз errorElement хусусиятини қўшишингиз mумкин ва қиймат сифатида хатолик юз белганда кўрсатмоқчи бўлган элементни белгилашингиз mумкин.

Лекин агар бизда errorElement ҳамма маршрутлар учун бир хил бўлса? Албатта, ҳар бири учун бир хил нарсани такрорлаш мумкин, yoki йўлсиз маршрутдан фойдаланиб, бизга керакли болалар маршрутларини ура оламиз. У ҳолда уларнинг бирида хатолик юз берганда, бизнинг йўлсиз маршрутимиз ушбу хатоликни ушлаб, ўзининг 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 хусусиятига эга йўлсиз маршрут ичига олинг ва у ишлашини текширинг.