Загрузчик данных для маршрута в 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 />,
      },
    ],
  },
]);