Роҳбар дар 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 />,
      },
    ],
  },
]);