Reitin datan lataaja React Routerissa

Edellisellä oppitunnilla poimimme tuotteiden tiedot tallennustilasta. Nyt nämä tiedot on ladattava reitin elementtiin. Tätä varten käytetään lataajafunktiota (loader). Nyt luomme sen.

Avataan root.jsx, lisätään tänne import-rivi getProducts tiedostosta forStorage.js:

import { getProducts } from '../forStorage'

Heti import-rivien jälkeen ja ennen funktiota Root kirjoitetaan koodi funktiolle loader, joka getProducts:n kautta palauttaa meille tuotetiedot tallennustilasta. Yleensä tällaiset funktiot pitäisi kirjoittaa erilliseen tiedostoon, mutta me olemme hieman laiskoja, joten älkää kiinnittäkö huomiota varoitukseen:

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

Lisätään nyt lataajamme import main.jsx:iin. Tämä lataaja on meille juurelle, joten nimeämme sen rootLoader:ksi:

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

Ja lisätään se reittiolioomme ominaisuuteen loader:

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

Ota sovellus, jonka loit tehtävissä edellisille oppitunneille. Hyödynnä oppitunnin materiaaleja, kirjoita tiedostoon root.jsx funktio loader opiskelijatietojen lataamiseksi ja lisää se reittiolioon main.jsx:ssä.