Loader i të dhënave për rrugën në React Router

Në mësimin e kaluar ne nxorrëm të dhënat e produkteve nga depoja. Tani këto të dhëna duhet të ngarkohen në elementin e rrugës. Për këtë përdoret funksioni i loader-it (loader). Tani do ta krijojmë atë.

Le të hapim root.jsx, të shtojmë këtu rreshtin e importit getProducts nga forStorage.js:

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

Menjëherë pas rreshtave të importit dhe përpara funksionit Root le të shkruajmë kodin e funksionit loader, i cili përmes getProducts do na kthejë të dhënat e produkteve nga depoja. Në përgjithësi funksione të tilla duhet shkruar në një skedar të veçantë, por ne do të jemi pak dembel, kështu që mos i kushtoni vëmendje paralajmërimit:

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

Tani le të shtojmë importin e loader-it tonë në main.jsx. Ky loader do të jetë për rrenjin, prandaj le ta quajmë atë rootLoader:

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

Dhe le ta shtojmë atë në objektin tonë të rrugës në vetinë loader:

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