Loader podataka za rutu u React Router

U prethodnoj lekciji smo izvukli podatke proizvoda iz skladišta. Sada ove podatke treba da učitamo u element rute. Za ovo se koristi funkcija loader-a (loader). Sada ćemo je kreirati.

Otvorimo root.jsx, dodajmo ovde liniju import-a getProducts iz forStorage.js:

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

Odmah posle linija import-a i pre funkcije Root napišimo kod funkcije loader, koja preko getProducts će vraćati nam podatke sa proizvodima iz skladišta. Uopšte takve funkcije treba pisati u posebnom fajlu, ali mi ćemo malo biti lenji, tako da ne obraćajte pažnju na upozorenje:

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

Hajde sada da dodamo import našeg loader-a u main.jsx. Ovaj loader će kod nas biti za koren, stoga ćemo ga nazvati rootLoader:

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

I dodajmo ga u naš objekat rute u svojstvo loader:

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