Maršruto duomenų įkėlimo funkcija React Router

Ankstesnėje pamokoje mes ištraukėme produktų duomenis iš saugyklos. Dabar šiuos duomenis reikia įkelti į maršruto elementą. Tam naudojama įkėlimo funkcija (loader). Dabar mes ją sukursime.

Atidarykime root.jsx, pridėkime čia importo eilutę getProducts iš forStorage.js:

import { getProducts } from '../forStorage'

Iškart po importo eilučių ir prieš funkciją Root parašykime funkcijos loader kodą, kuri per getProducts bus grąžinti mums produktų duomenis iš saugyklos. Apskritai tokios funkcijos turėtų būti rašomos atskirame faile, bet mes šiek tiek tingėsime, todėl nekreipkite dėmesio į įspėjimą:

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

Dabar pridėkime mūsų įkėlimo funkcijos importą į main.jsx. Ši įkėlimo funkcija bus mums skirta šaknies maršrutui, todėl pavadinkime ją rootLoader:

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

Ir pridėkime ją į mūsų maršruto objektą į savybę loader:

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

Paimkite programą, kurią sukūrėte užduotyse ankstesnėse pamokose. Naudodamiesi pamokos medžiaga, parašykite faile root.jsx funkciją loader studentų duomenų įkėlimui ir pridėkite ją į maršruto objektą main.jsx.