Ładowanie danych dla trasy w React Router

W poprzedniej lekcji wyodrębniliśmy dane produktów z magazynu. Teraz te dane należy załadować do elementu trasy. W tym celu używana jest funkcja ładowania (loader). Teraz ją utworzymy.

Otwórzmy root.jsx, dodajmy tutaj wiersz importu getProducts z forStorage.js:

import { getProducts } from '../forStorage'

Bezpośrednio po wierszach importu i przed funkcją Root napiszmy kod funkcji loader, która poprzez getProducts będzie zwracać nam dane produktów z magazynu. Ogólnie takie funkcje należy pisać w oddzielnym pliku, ale my trochę po lenimy, więc nie zwracajcie uwagi na ostrzeżenie:

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

Dodajmy teraz import naszego ładowarki do main.jsx. Ten ładowarka będzie u nas dla korzenia, więc nazwijmy go rootLoader:

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

I dodajmy go do naszego obiektu trasy w właściwość loader:

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

Weź aplikację utworzoną przez Ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, napisz w pliku root.jsx funkcję loader do ładowania danych studentów i dodaj ją do obiektu trasy w main.jsx.