Maršruts bez ceļa React Router

Šajā nodarbībā mēs apskatīsim vēl vienu noderīgu maršruta bez ceļa īpašību.

Jūs zināt, ka katram maršruta objektam varat pievienot īpašību errorElement un kā vērtību iestatīt to elementu, kuru vēlaties rādīt, kad rodas kļūda.

Bet ja nu mums errorElement būs vienāds visiem maršrutiem? Var, protams, pievienot to pašu katram, bet var izmantot maršrutu bez ceļa, aptinot tajā mūs interesējošos bērnu maršrutus. Tad kļūdas gadījumā uz kāda no tiem, mūsu maršruts bez ceļa tos noķers un parādīs savu errorElement.

Iesim failā main.jsx un aptīsim maršrutā bez ceļa visus mūsu bērnu maršrutus, padarot tos par tā bērniem (savukārt šis maršruts kļūs par saknes bērnu), neaizmirsīsim tam pievienot arī īpašību 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,
					},
				],
			},
		],
	},
]);

Kā tagad pārbaudīt šī koda darbību? Var pievienot rindiņu ar kļūdas izmešanu (neaizmirstiet to pēc tam noņemt, kad pārbaudījāt). Piemēram, pievienosim to kā pirmo rindiņu funkcijā action produkta dzēšanas maršrutam, tad, mēģinot dzēst produktu, mēs redzēsim kļūdu:

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

Tagad mēģiniet izdzēst kādu produktu.

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, aptiniet savus bērnu maršrutus maršrutā bez ceļa ar īpašību errorElement un pārbaudiet, ka tas darbojas.