Maršrutas be kelio React Router

Šioje pamokoje nagrinėsime dar vieną naudingą maršruto be kelio savybę.

Jūs žinote, kad kiekvienam maršruto objektui galite pridėti savybę errorElement ir kaip reikšmę nustatyti tą elementą, kurį norite rodyti kai įvyksta klaida.

Bet kas jei mums errorElement bus vienodas visiems maršrutams? Galima, žinoma, priskirti tą patį kiekvienam, arba galima pasinaudoti maršrutu be kelio, apvynioti juo mus dominančius antrinius maršrutus. Tada kai įvyksta klaida viename iš jų, mūsų maršrutas be kelio juos pagaus ir parodys savo errorElement.

Eikime į main.jsx failą ir apvyniokime maršrutu be kelio visus mūsų antrinius maršrutus, padarydami juos jo antriniais (savo ruožtu šis maršrutas taps pagrindinio antriniu), nepamirškime jam taip pat pridėti savybę 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,
					},
				],
			},
		],
	},
]);

Kaip dabar patikrinti šio kodo veikimą? Galima pridėti eilutę su klaidos metimu (nepamirškite jos pašalinti, kai patikrinsite). Pavyzdžiui, pridėkime ją pirmąja eilute į funkciją action produkto ištrynimo maršrutui, tada bandant ištrinti produktą pamatysime klaidą:

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

Dabar pabandykite ištrinti kokį nors produktą.

Paimkite programėlę, kurią sukūrėte užduotyse ankstesnėse pamokose. Naudodamiesi pamokos medžiaga, apvyniokite savo antrinius maršrutus maršrutu be kelio su savybe errorElement ir patikrinkite, kad tai veikia.