Երթուղու տվյալների բեռնիչ 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 />,
      },
    ],
  },
]);