React Router'da marshrut uchun ma'lumotlar yuklovchisi

O'tgan darsda biz mahsulotlar ma'lumotlarini omborxonadan olib chiqdik. Endi bu ma'lumotlarni marshrut elementiga yuklash kerak. Buning uchun yuklovchi funktsiyasi (loader) ishlatiladi. Hozir biz uni yaratamiz.

root.jsx faylini ochamiz, bu yerga getProducts ning import qatorini qo'shamiz forStorage.js dan:

routes/root.jsximport { getProducts } from '../forStorage'

Import qatorlaridan darhol keyin va Root funktsiyasidan oldin loader funktsiyasining kodini yozamiz, u getProducts orqali bizga omborxonadagi mahsulotlar haqidagi ma'lumotlarni qaytaradi. Umuman bunday funktsiyalarni alohida faylda yozish kerak, lekin biz biroz dam olamiz, shuning uchun ogohlantirishga e'tibor bermang:

routes/root.jsxexport async function loader() {
  const products = await getProducts();
  return { products };
}

Keling, endi main.jsx fayliga yuklovchimizni import qilaylik. Bu yuklovchi biz uchun ildiz (root) uchun bo'ladi, shuning uchun uni rootLoader deb nomlaymiz:

main.jsximport Root, { loader as rootLoader } from './routes/root';

Va uni marshrut obyektimizga loader xususiyatiga qo'shamiz:

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