Nalagalnik podatkov za pot v React Router

V prejšnji lekciji smo pridobili podatke izdelkov iz shrambe. Zdaj je treba te podatke naložiti v element poti. Za to se uporablja funkcija nalagalnika (loader). Zdaj jo bomo ustvarili.

Odprimo root.jsx, dodajmo tukaj vrstico za uvoz getProducts iz forStorage.js:

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

Takoj za vrsticami za uvoz in pred funkcijo Root napišimo kodo funkcije loader, ki bo prek getProducts vračala podatke z izdelki iz shrambe. Načeloma je treba takšne funkcije pisati v ločeni datoteki, vendar bomo malo lenarili, zato ne bodite pozorni na opozorilo:

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

Zdaj dodajmo uvoz našega nalagalnika v main.jsx. Ta nalagalnik bo za koren, zato ga poimenujmo rootLoader:

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

In dodajmo ga v naš objekt poti v lastnost loader:

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