Verwendung von durch den Loader in React Router geladenen Daten

In der letzten Lektion haben wir Daten aus dem Store mithilfe von loader abgerufen. Um diese Daten zu verwenden, verwenden wir den Hook useLoaderData. Lassen Sie uns die Datei root.jsx öffnen und den Hook zum Import hinzufügen:

import { Outlet, Link, useLoaderData } from 'react-router-dom';

In der Funktion Root erhalten wir nun Daten in der Konstante products und arbeiten direkt mit ihr. Wenn wir Produkte haben, wird die Liste angezeigt, wenn nicht, geben wir im Absatz 'no products here ...' aus. Im Tag nav verwenden wir nun eine Standard-Schleife zur Ausgabe der erhaltenen Produkte. Jedes Element wird umschlossen von einer Link-Komponente und die Adresse wird für jedes Element individuell sein (darüber sprechen wir später). Dementsprechend, wenn ein Produkt keinen Namen hat, wird standardmäßig 'Unnamed' angezeigt. Unter Berücksichtigung des Gesagten sieht unser Code für die Funktion Root jetzt so aus:

function Root() {

	const { products } = useLoaderData();
	return (
		<div id="main">
			{products.length ? (
				<nav>
					{products.map((product) => (
						<Link key={product.id} to={`products/${product.id}`}>
							{product.name ? product.name : <i>Unnamed</i>}
						</Link>
					))}
				</nav>
			) : (
				<p><i>no products here ...</i></p>
			)}
			<div id="product">
				<Outlet />
			</div>
		</div>
	);
}

Wenn wir die Anwendung jetzt neu starten und die Hauptseite aufrufen, sehen wir nur 'no products here ...', da wir noch keine Produkte im Store abgelegt haben.

Nehmen Sie die Anwendung, die Sie in den Aufgaben zu den vorherigen Lektionen erstellt haben. Verwenden Sie die Materialien der Lektion, um die Anzeige der vom Loader abgerufenen Studentendaten hinzuzufügen, wie in der Lektion beschrieben.