Учитавање података за руту у 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 />,
      },
    ],
  },
]);