Загрузчик данных для маршрута в 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.