Φορτωτής Δεδομένων για τη Διαδρομή στο React Router

Στο προηγούμενο μάθημα, εξάγαμε τα δεδομένα των προϊόντων από το χώρο αποθήκευσης. Τώρα αυτά τα δεδομένα πρέπει να φορτωθούν στο στοιχείο της διαδρομής. Για αυτό χρησιμοποιείται η συνάρτηση φορτωτή (loader). Τώρα θα τη δημιουργήσουμε.

Ας ανοίξουμε το root.jsx, ας προσθέσουμε εδώ μια γραμμή εισαγωγής του getProducts από το forStorage.js:

import { getProducts } from '../forStorage'

Αμέσως μετά τις γραμμές εισαγωγής και πριν από τη συνάρτηση Root, θα γράψουμε τον κώδικα της συνάρτησης loader, η οποία μέσω του getProducts θα μας επιστρέφει τα δεδομένα με τα προϊόντα από το χώρο αποθήκευσης. Γενικά, τέτοιες συναρτήσεις πρέπει να γράφονται σε ξεχωριστό αρχείο, αλλά εμείς λίγο τεμπελιάζουμε, γι' αυτό μην δίνετε σημασία στην προειδοποίηση:

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

Ας προσθέσουμε τώρα την εισαγωγή του φορτωτή μας στο main.jsx. Αυτός ο φορτωτής θα είναι για τη ρίζα, γι' αυτό θα τον ονομάσουμε rootLoader:

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

Και ας τον προσθέσουμε στο αντικείμενο διαδρομής μας στην ιδιότητα loader:

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

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