Reitittömän reitin käyttö React Routerissa

Tällä oppitunnilla tarkastelemme vielä yhtä reitittömän reitin hyödyllistä ominaisuutta.

Tiedät, että jokaiselle reittiobjektille voit lisätä ominaisuuden errorElement ja asettaa arvoksi sen elementin, jonka haluat näkyvän virheen ilmaantuessa.

Mutta mitä jos errorElement on sama kaikille reiteille? Voisimme tietenkin lisätä saman jokaiselle, tai voimme hyödyntää reititöntä reittiä, kääriä sen sisälle meitä kiinnostavat lapsireitit. Silloin virheen ilmaantuessa yhdellä niistä, reititon reittimme näkee sen ja näyttää oman errorElementnsä.

Menkäämme tiedostoon main.jsx ja käärimme reitittömän reitin sisälle kaikki lapsireittimme, tekemme niistä sen lapsia (vuorostaan tästä reitistä tulee pääreitin lapsi), älkäämme unohtako lisätä sille myös ominaisuuden 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,
					},
				],
			},
		],
	},
]);

Miten tarkistamme nyt tämän koodin toiminnan? Voimme lisätä rivin, joka heittää virheen (älkää unohtako poistaa sitä myöhemmin, kun olette tarkistaneet). Lisätäänpä esimerkiksi se ensimmäiseksi riviksi funktioon action tuotteen poistoreitille, silloin yrityksessä poistaa tuote näemme virheen:

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

Yrittäkää nyt poistaa jokin tuote.

Ota sovellus, jonka loit aiempien oppituntien tehtäviin. Hyödyntäen oppitunnin materiaaleja, kierrä lapsireittisi reitittömän reitin sisälle ominaisuudella errorElement ja varmista, että se toimii.