Маршрут үшін деректер жүктеушісі 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 />,
      },
    ],
  },
]);