Abrufen von Loader-Daten über URL-Parameter in React Router

In der letzten Lektion haben wir eine Funktion zum Abrufen der Daten für die Produktseite geschrieben. Lasst uns getProduct in der Datei product.jsx importieren:

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

Wir schreiben die Loader-Funktion loader gleich nach dem Import und vor der Funktion Product. Wir übergeben ihr die URL- Parameter:

export async function loader({ params }) {
	const product = await getProduct(params.productId);
	return { product };
}

Außerdem importieren wir den Hook useLoaderData, um die vom Loader erhaltenen Daten zu verwenden:

import { useLoaderData } from 'react-router-dom';

Wir wenden useLoaderData an und ersetzen entsprechend die Zeile mit der Erstellung des Objekts product am Anfang der Funktion Product durch folgende:

const { product } = useLoaderData();

Und natürlich passen wir unser Markup etwas an, da wir das alte Objekt product entfernt haben. Wir ersetzen den Inhalt der Absätze:

<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

Durch Folgendes:

<p>Name: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Amount: {product.amount ? product.amount : <i>unknown</i>}</p>

Jetzt müssen wir nur noch main.jsx öffnen und dort den Import von loader hinzufügen, nennen wir ihn productLoader:

import Product, {
	loader as productLoader,
} from './routes/product';

Und ihn als Loader für das Route-Objekt der Produktseite konfigurieren, indem wir ihn in children nach der Eigenschaft element hinzufügen:

children: [
	{
		path: 'products/:productId',
		element: <Product />,
		loader: productLoader,
	},
],

Das war's, wir haben das Laden der Daten für die Produktseite geschafft! Allerdings gibt es noch nichts zu laden. Starten Sie die Anwendung, fügen Sie Produkte hinzu und klicken Sie sie in der Liste an, um sicherzugehen, dass alles funktioniert.

Nehmen Sie die Anwendung, die Sie in den Aufgaben zu den vorherigen Lektionen erstellt haben. Nutzen Sie die Unterlagen der Lektion, um einen loader zu implementieren, schließen Sie ihn an und verwenden Sie seine Daten für die Seite mit dem Studenten.