Datenloader für Routen in React Router

In der letzten Lektion haben wir die Produktdaten aus dem Speicher extrahiert. Jetzt müssen diese Daten in das Routenelement geladen werden. Dafür wird die Loader-Funktion (loader) verwendet. Jetzt werden wir sie erstellen.

Öffnen wir root.jsx, fügen wir hier eine Import-Zeile für getProducts aus forStorage.js hinzu:

import { getProducts } from '../forStorage'

Direkt nach den Import-Zeilen und vor der Funktion Root schreiben wir den Code für die Funktion loader, die über getProducts die Produktdaten aus dem Speicher zurückgeben wird. Eigentlich sollten solche Funktionen in einer separaten Datei geschrieben werden, aber wir sind etwas faul, also ignorieren Sie die Warnung:

export async function loader() {
	const products = await getProducts();
	return { products };
}

Fügen wir nun den Import unseres Loaders in main.jsx hinzu. Dieser Loader wird für die Wurzelroute sein, daher nennen wir ihn rootLoader:

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

Und fügen wir ihn in unser Routenobjekt in die Eigenschaft loader ein:

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

Nehmen Sie die Anwendung, die Sie in den Aufgaben der vorherigen Lektionen erstellt haben. Verwenden Sie die Materialien der Lektion, schreiben Sie in der Datei root.jsx die Funktion loader zum Laden der Studentendaten und fügen Sie sie in das Routenobjekt in main.jsx ein.