Route sans chemin dans React Router

Dans cette leçon, nous examinerons une autre propriété utile de la route sans chemin.

Vous savez que pour chaque objet de route, vous pouvez ajouter une propriété errorElement et définir comme valeur l'élément que vous souhaitez afficher lorsqu'une erreur se produit.

Mais que faire si notre errorElement est identique pour toutes les routes ? On pourrait, bien sûr, le répéter pour chacune, ou on pourrait utiliser une route sans chemin, y envelopper les routes enfants qui nous intéressent. Ainsi, en cas d'erreur sur l'une d'elles, notre route sans chemin les interceptera et affichera son errorElement.

Allons dans le fichier main.jsx et enveloppons toutes nos routes enfants dans une route sans chemin, en les rendant ses enfants (à son tour cette route deviendra un enfant de la racine), n'oublions pas de lui ajouter également la propriété 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,
					},
				],
			},
		],
	},
]);

Comment vérifier maintenant le fonctionnement de ce code ? On peut ajouter une ligne qui lance une erreur (n'oubliez pas de la supprimer ensuite, quand vous aurez vérifié). Par exemple, ajoutons-la comme première ligne dans la fonction action pour la route de suppression du produit, alors en essayant de supprimer un produit nous verrons une erreur :

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

Maintenant, essayez de supprimer un produit.

Prenez l'application que vous avez créée dans les exercices des leçons précédentes. En utilisant le matériel de la leçon, enveloppez vos routes enfants dans une route sans chemin avec la propriété errorElement et vérifiez que cela fonctionne.