Загрузчык даных для маршруту ў 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: '/by/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    loader: rootLoader,
    children: [
      {
        path: 'products/:productId',
        element: <Product />,
      },
    ],
  },
]);