Роҳи бе роҳ дар 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('хато');
	await deleteProduct(params.productId);
	return redirect('/');
}

Акнун кӯшиш кунед, ки як маҳсулотро нест кунед.

Барномаеро, ки шумо дар вазифаҳо барои дарсҳои гузашта сохтаед, гиред. Бо истифода аз манбаъҳои дарс, роҳҳои фарзандӣи худро дар як роҳи бе роҳ бо хуссияти errorElement бипечонед ва тафтиш кунед, ки ин кор мекунад.