Λήψη δεδομένων loader από URL παραμέτρους στο React Router

Στο προηγούμενο μάθημα γράψαμε μια συνάρτηση για τη λήψη δεδομένων της σελίδας προϊόντος, ας εισαγάγουμε το getProduct στο αρχείο product.jsx:

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

Ας γράψουμε τη συνάρτηση loader loader αμέσως μετά την εισαγωγή και πριν από τη συνάρτηση Product. Ας περάσουμε σε αυτήν τις URL παραμέτρους:

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

Επίσης, ας εισάγουμε το hook useLoaderData για τη χρήση των δεδομένων που λαμβάνονται από το loader:

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

Ας εφαρμόσουμε το useLoaderData, αντικαθιστώντας αντίστοιχα τη γραμμή με τη δημιουργία του αντικειμένου product στην αρχή της συνάρτησης Product με την ακόλουθη:

const { product } = useLoaderData();

Και, φυσικά, ας αλλάξουμε λίγο το markup μας, αφού αφαιρέσαμε το παλιό αντικείμενο product. Ας αντικαταστήσουμε το περιεχόμενο των παραγράφων:

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

Με το ακόλουθο:

<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>

Μένει να ανοίξουμε το main.jsx και να προσθέσουμε εκεί την εισαγωγή του loader, ας τον ονομάσουμε productLoader:

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

Και να τον ορίσουμε ως loader για το αντικείμενο διαδρομής της σελίδας προϊόντος, προσθέτοντάς τον στα children μετά την ιδιότητα element:

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

Όλα, με τη φόρτωση δεδομένων για τη σελίδα προϊόντος τα καταφέραμε! Ωστόσο, δεν έχουμε τίποτα να φορτώσουμε προς το παρόν. Εκτελέστε την εφαρμογή, προσθέστε προϊόντα και κάντε κλικ πάνω τους στη λίστα για να βεβαιωθείτε ότι όλα λειτουργούν.

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