Teeta marsruut React Routeris

Selles õppetükis vaatleme veel üht kasulikku omadust teeta marsruudil.

Te teate, et iga marsruudiobjekti jaoks saate lisada omaduse errorElement ja väärtuseks seada selle elemendi, mida soovite kuvada vea tekkimisel.

Aga mis siis, kui meil on errorElement kõigi marsruutide jaoks sama? Võib muidugi igaühele sama asja panna, aga võib kasutada teeta marsruuti, määrata selle alla meid huvitavad laste marsruudid. Siis vea tekkimisel ühel neist, meie teeta marsruut püüab need kinni ja kuvab oma errorElement.

Läheme faili main.jsx ja määrame teeta marsruudi alla kõik meie laste marsruudid, tehes need selle lasteks (see marsruut omakorda saab juurmarsruudi lapseks), ärgem unustagem lisada sellele ka omadust 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,
					},
				],
			},
		],
	},
]);

Kuidas kontrollida nüüd selle koodi tööd? Võib lisada rea vea viskamisega (ärge unustage seda hiljem eemaldada, kui olete kontrollinud). Paneme näiteks selle esimese reana funktsiooni action toote kustutamise marsruudi jaoks, siis toodet kustutada üritades näeme viga:

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

Proovige nüüd mõnda toodet kustutada.

Võtke rakendus, mille lõite ülesannetes eelmistele tundidele. Kasutades tunni materjale, määrake oma lapsemarsruudid teeta marsruudi alla omadusega errorElement ja kontrollige, et see töötab.