Загрузчик на данни за маршрут в React Router

В предишния урок извлекохме данните за продуктите от хранилището. Сега тези данни трябва да се заредят в елемента на маршрута. За това се използва функция загрузчик (loader). Сега ще я създадем.

Нека отворим root.jsx, да добавим тук ред за импорт на getProducts от forStorage.js:

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

Веднага след редовете за импорт и преди функцията Root ще напишем кода на функцията loader, която чрез getProducts ще връща данните за продуктите от хранилището. Като цяло такива функции трябва да се пишат в отделен файл, но ние малко ще полземи, така че не обръщайте внимание на предупреждението:

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

Нека сега добавим импорт на нашия загрузчик в main.jsx. Този загрузчик ще бъде за корена, затова ще го наречем rootLoader:

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

И ще го добавим в нашия обект на маршрута в свойството loader:

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