# Загрузчик данных для маршрута в React Router

На прошлом уроке мы извлекли данные продуктов из хранилища. Теперь эти данные нужно загрузить в элемент маршрута. Для этого используется функция загрузчика (англ. loader). Сейчас мы ее создадим.

Откроем `root.jsx`, добавим сюда строчку импорта `getProducts` из `forStorage.js`:

`import { getProducts } from '../forStorage'`

Сразу после строчек импорта и перед функцией `Root` напишем код функции `loader`, которая через `getProducts` будет возвращать нам данные с продуктами из хранилища. Вообще такие функции надо писать в отдельном файле, но мы немного поленимся, так что не обращайте внимание на предупреждение (можете, конечно, и попробовать ;) ):

`export async function loader() { const products = await getProducts(); return { products }; }`

Давайте теперь добавим импорт нашего загрузчика в `main.jsx`. Этот загрузчик у нас будет для корня, поэтому назовем его `rootLoader`:

`import Root, { loader as rootLoader } from './routes/root';`

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

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

Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, напишите в файле `root.jsx` функцию `loader` для загрузки данных студентов и добавьте ее в объект маршрута в main.jsx.

← →
↑