Datalaster for rute i React Router

I forrige leksjon hentet vi dataene fra produkter fra lagringsstedet. Nå må disse dataene lastes inn i ruteelementet. For dette brukes en lasterfunksjon (loader). Nå skal vi opprette den.

La oss åpne root.jsx, og legge til en importeringslinje for getProducts fra forStorage.js:

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

Rett etter importeringslinjene og før funksjonen Root skal vi skrive koden for funksjonen loader, som via getProducts vil returnere produktdataene fra lagringsstedet. Egentlig bør slike funksjoner skrives i en egen fil, men vi skal være litt late, så ikke ta hensyn til advarselen:

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

La oss nå legge til importen av vår laster i main.jsx. Denne lasteren vil være for roten, så vi kaller den rootLoader:

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

Og legg den til i vårt ruteobjekt i egenskapen loader:

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