Načítavač dát pre trasu v React Router

Na minulej lekcii sme extrahovali dáta produktov z úložiska. Teraz tieto dáta treba načítať do elementu trasy. Na to sa používa funkcia načítavača (loader). Teraz ju vytvoríme.

Otvorme root.jsx, pridáme sem riadok importu getProducts z forStorage.js:

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

Hneď po riadkoch importu a pred funkciou Root napíšeme kód funkcie loader, ktorá cez getProducts bude vracať nám dáta s produktmi z úložiska. Všeobecne takéto funkcie treba písať v samostatnom súbore, ale my trochu zlenivieme, takže nevenujte pozornosť varovaniu:

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

Pridajme teraz import nášho načítavača do main.jsx. Tento načítavač bude u nás pre koreň, preto ho nazveme rootLoader:

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

A pridajme ho do nášho objektu trasy do vlastnosti loader:

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