Χρήση δεδομένων που ελήφθησαν από τον φορτωτή στο React Router

Στο προηγούμενο μάθημα λάβαμε δεδομένα από την αποθήκη χρησιμοποιώντας το loader. Για να χρησιμοποιήσουμε αυτά τα δεδομένα, θα χρησιμοποιήσουμε το hook useLoaderData. Ας ανοίξουμε το αρχείο root.jsx και να προσθέσουμε το hook στην εισαγωγή:

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

Στη συνάρτηση Root θα λάβουμε τώρα τα δεδομένα στη σταθερά products και θα δουλέψουμε με αυτή. Εάν έχουμε οποιαδήποτε προϊόντα, τότε η λίστα θα εμφανιστεί, εάν όχι, θα εμφανίσουμε στην παράγραφο 'no products here ...'. Στην ετικέτα nav χρησιμοποιούμε τώρα τυποποιημένο βρόχο για την εμφάνιση των ληφθέντων προϊόντων. Κάθε στοιχείο θα τυλιχτεί στο στοιχείο Link και η διεύθυνση θα είναι διαφορετική για κάθε ένα (για αυτό θα μιλήσουμε αργότερα). Αντίστοιχα, εάν ένα προϊόν δεν έχει όνομα, τότε θα εμφανιστεί το 'Unnamed' από προεπιλογή. Λαμβάνοντας υπόψη τα παραπάνω, τώρα ο κώδικας μας για τη συνάρτηση Root θα είναι ως εξής:

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

Εάν τώρα επανεκκινήσουμε την εφαρμογή και πάμε στην αρχική σελίδα, θα δούμε μόνο το 'no products here ...', καθώς δεν έχουμε ακόμη προσθέσει κανένα προϊόν στην αποθήκη.

Πάρτε την εφαρμογή που δημιουργήσατε στις ασκήσεις των προηγούμενων μαθημάτων. Χρησιμοποιώντας τα υλικά του μαθήματος, προσθέστε την εμφάνιση των δεδομένων που ελήφθησαν από τον φορτωτή με τους μαθητές, όπως περιγράφεται στο μάθημα.