Rute uten sti i React Router

I denne leksjonen skal vi se på enda en nyttig egenskap ved ruter uten sti.

Du vet at for hvert ruteobjekt kan du legge til en egenskap errorElement og som verdi sette det elementet du ønsker å vise ved oppstått feil.

Men hva om vår errorElement er den samme for alle rutene? Man kan selvfølgelig sette den samme for hver, eller man kan bruke en rute uten sti, og pakke inn de barerutene vi er interessert i. Da, hvis en feil oppstår i en av dem, vil vår rute uten sti fange dem opp og vise sin errorElement.

La oss gå inn i main.jsx filen og pakke inn alle våre bareruter i en rute uten sti, og gjøre dem til barn av den (denne ruten vil i sin tur bli et barn av rotruten), ikke glem å også legge til egenskapen 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,
					},
				],
			},
		],
	},
]);

Hvordan sjekker vi nå at denne koden fungerer? Man kan legge til en linje som kaster en feil (ikke glem å fjerne den etterpå, når du har sjekket). La oss for eksempel legge den til som første linje i funksjonen action for ruten som sletter produktet, da vil vi ved forsøk på å slette et produkt se feilen:

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

Prøv nå å slette et produkt.

Ta applikasjonen du opprettet i oppgavene til tidligere leksjoner. Bruk materialet fra leksjonen, pakk inn dine bareruter i en rute uten sti med egenskapen errorElement og sjekk at dette fungerer.