Hinzufügen von Daten mit der action-Methode in React Router

In dieser Lektion machen wir uns mit der Methode action des Routenobjekts vertraut. Diese Methode wird aufgerufen, wenn die Anwendung eine HTTP-Anfrage vom Typ POST, PUT, PATCH oder DELETE (außer GET) an Ihre Route sendet.

Zuerst importieren wir die Funktion zum Erstellen eines Produkts, die wir in der letzten Lektion geschrieben haben, in unsere root.jsx:

import { createProduct } from '../forStorage';

Jetzt müssen wir eine action-Funktion erstellen, die von React Router beim Klick auf den Button zum Hinzufügen eines Produkts aufgerufen wird. Wir platzieren sie nach der loader-Funktion:

export async function action() {
	const product = await createProduct();
	return { product };
}

Öffnen wir main.jsx und importieren die action:

import Root, {
	loader as rootLoader,
	action as rootAction
} from './routes/root';

Und setzen sie als Wert für die Methode action des Routenobjekts. Die Form-Komponente verhindert, dass der Browser beim Klick auf den Button Anfragen an den Server sendet, und wendet sich stattdessen an die Methode action unserer Route. So interessant funktioniert Client-seitiges Routing mit React Router:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		loader: rootLoader,
		action: rootAction,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},
	
]);

Starten wir unsere Anwendung. Öffnen wir den Tab 'Anwendung' (Application für Chrome) in den Entwicklerwerkzeugen, klicken wir unter verschiedenen Speichertypen auf indexedDB, hier interessiert uns localforage. Wenn wir jetzt in unserer Anwendung auf den Button zum Hinzufügen von Produkten klicken und den localforage-Speicher nach dem Klick aktualisieren, sehen wir, wie in keyvaluepairs im Array products Objekte mit verschiedenen id hinzugefügt werden. Sieg!!! Das bedeutet, dass in unserem Speicher Einträge erstellt werden! Natürlich wird auch die Liste in unserer Anwendung erweitert. Hinweis: Vergessen Sie nicht, die gespeicherten Daten dieser Seite später im Tab 'Storage' in Application zu löschen.

Nehmen Sie die Anwendung, die Sie in den Aufgaben zu den vorherigen Lektionen erstellt haben. Erstellen Sie unter Verwendung des Lehrmaterials die Funktion action, fügen Sie sie dem Stammroutenobjekt als Methode action hinzu.