Dataladdare för rutt i React Router

I förra lektionen extraherade vi data för produkter från lagringen. Nu behöver denna data laddas in i rutelementet. För detta används en laddarfunktion (loader). Nu ska vi skapa den.

Låt oss öppna root.jsx, lägg till en importrad för getProducts från forStorage.js:

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

Omedelbart efter importraderna och före funktionen Root skriver vi koden för funktionen loader, som via getProducts kommer att returnera produktdata från lagringen. Egentligen borde sådana funktioner skrivas i en separat fil, men vi kommer att vara lite lata, så bry er inte om varningen:

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

Låt oss nu lägga till import av vår laddare i main.jsx. Denna laddare kommer att vara för roten, så vi kallar den rootLoader:

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

Och lägg till den i vårt rutobjekt i egenskapen loader:

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