Načítání dat pro trasu v React Router

V minulé lekci jsme extrahovali data produktů z úložiště. Nyní je třeba tato data načíst do elementu trasy. K tomu se používá funkce načítání (loader). Nyní ji vytvoříme.

Otevřeme root.jsx, přidáme sem řádek importu getProducts z forStorage.js:

import { getProducts } from '../forStorage'

Ihned po řádcích importu a před funkcí Root napíšeme kód funkce loader, která přes getProducts bude vracet data s produkty z úložiště. Obecně by se takové funkce měly psát v samostatném souboru, ale my trochu zlenošíme, takže nevěnujte pozornost varování:

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

Nyní přidejme import našeho načítání do main.jsx. Toto načítání bude pro kořen, proto jej nazveme rootLoader:

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

A přidejme jej do našeho objektu trasy do vlastnosti loader:

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

Vezměte aplikaci, kterou jste vytvořili v úkolech k minulým lekcím. Použijte materiály lekce a napište v souboru root.jsx funkci loader pro načítání dat studentů a přidejte ji do objektu trasy v main.jsx.