React Router'da Rota için Veri Yükleyici

Önceki derste, verileri depodan çıkardık. Şimdi bu verilerin rota elemanına yüklenmesi gerekiyor. Bunun için bir yükleyici (loader) fonksiyonu kullanılır. Şimdi bu fonksiyonu oluşturacağız.

root.jsx dosyasını açalım, buraya forStorage.js dosyasından getProducts import satırını ekleyelim:

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

Hemen import satırlarından sonra ve Root fonksiyonundan önce, getProducts aracılığıyla depodan ürün verilerini bize döndürecek olan loader fonksiyonunun kodunu yazalım. Aslında bu tür fonksiyonlar ayrı bir dosyada yazılmalıdır, ancak biz biraz tembellik edeceğiz, bu yüzden uyarıyı dikkate almayın:

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

Şimdi yükleyicimizin import işlemini main.jsx dosyasına ekleyelim. Bu yükleyici kök için olacak, bu nedenle adını rootLoader koyalım:

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

Ve onu rota nesnemize loader özelliğine ekleyelim:

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