Pfadlose Route in React Router

In dieser Lektion werden wir eine weitere nützliche Eigenschaft der pfadlosen Route betrachten.

Sie wissen, dass Sie für jedes Routenobjekt die Eigenschaft errorElement hinzufügen können und als Wert das Element festlegen können, das bei einem Fehler angezeigt werden soll.

Aber was, wenn unser errorElement für alle Routen gleich sein wird? Man könnte natürlich für jede Route dasselbe hinschreiben, oder man kann eine pfadlose Route verwenden, um die gewünschten Kinderrouten darin zu wrappen. Dann wird im Fehlerfall bei einer von ihnen unsere pfadlose Route diese abfangen und ihr errorElement anzeigen.

Gehen wir in die main.jsx Datei und wrappen alle unsere Kinderrouten in eine pfadlose Route, machen sie zu deren Kindern (diese Route wird selbst ein Kind der Root-Route) und vergessen nicht, ihr ebenfalls die Eigenschaft errorElement hinzuzufügen:

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,
					},
				],
			},
		],
	},
]);

Wie überprüft man nun die Funktionsweise dieses Codes? Man kann eine Zeile hinzufügen, die einen Fehler wirft (vergessen Sie nicht, sie später zu entfernen, wenn Sie fertig mit dem Testen sind). Fügen wir sie zum Beispiel als erste Zeile in die action Funktion für die Route zum Löschen eines Produkts ein, dann werden wir beim Versuch, ein Produkt zu löschen, einen Fehler sehen:

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

Versuchen Sie nun, ein Produkt zu löschen.

Nehmen Sie die Anwendung, die Sie in den Aufgaben zu den vorherigen Lektionen erstellt haben. Nutzen Sie die Materialien der Lektion, um Ihre Kinderrouten in eine pfadlose Route mit der Eigenschaft errorElement zu wrappen und überprüfen Sie, dass dies funktioniert.