Data Loader for Route in React Router

I den forrige lektion udtrak vi data for produkter fra lageret. Nu skal disse data indlæses i ruteelementet. Til dette bruges loader-funktionen (loader). Lige nu vil vi oprette den.

Lad os åbne root.jsx og tilføje en importlinje for getProducts fra forStorage.js:

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

Lige efter importlinjerne og før funktionen Root skriver vi koden for funktionen loader, som via getProducts vil returnere produktdataene fra lageret. Generelt skal sådanne funktioner skrives i en separat fil, men vi vil være lidt dovne, så ignorer advarslen:

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

Lad os nu tilføje importen af vores loader til main.jsx. Denne loader vil være for roden, så vi kalder den rootLoader:

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

Og vi tilføjer den til vores ruteobjekt i egenskaben loader:

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