Adatbetöltő az útvonalhoz a React Routerben

Az előző leckében kinyertük a termékek adatait a tárolóból. Most ezeket az adatokat be kell tölteni az útvonal elemébe. Ehhez egy betöltő függvényt (loader) használunk. Most meg fogjuk alkotni.

Nyissuk meg a root.jsx fájlt, adjuk hozzá a getProducts import sort a forStorage.js fájlból:

routes/root.jsximport { getProducts } from '../forStorage'

Közvetlenül az import sorok után és a Root függvény előtt írjuk meg a loader függvény kódját, amely a getProducts segítségével visszaadja nekünk a tárolóból származó termékadatok adatokat. Általában az ilyen függvényeket külön fájlba kell írni, de mi most kicsit lusták leszünk, ezért ne figyeljetek a figyelmeztetésre:

routes/root.jsxexport async function loader() {
  const products = await getProducts();
  return { products };
}

Most adjuk hozzá a betöltőnk importját a main.jsx fájlhoz. Ez a betöltő nálunk a gyökérhez lesz, ezért nevezzük el rootLoader-nek:

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

És adjuk hozzá az útvonalunk objektumához a loader tulajdonsághoz:

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