Ładowanie danych dla trasy w React Router

W poprzedniej lekcji wyodrębniliśmy dane produktów z magazynu. Teraz te dane należy załadować do elementu trasy. W tym celu używana jest funkcja ładowania (loader). Teraz ją utworzymy.

Otwórzmy root.jsx, dodajmy tutaj wiersz importu getProducts z forStorage.js:

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

Bezpośrednio po wierszach importu i przed funkcją Root napiszmy kod funkcji loader, która poprzez getProducts będzie zwracać nam dane produktów z magazynu. Ogólnie takie funkcje należy pisać w oddzielnym pliku, ale my trochę po lenimy, więc nie zwracajcie uwagi na ostrzeżenie:

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

Dodajmy teraz import naszego ładowarki do main.jsx. Ten ładowarka będzie u nas dla korzenia, więc nazwijmy go rootLoader:

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

I dodajmy go do naszego obiektu trasy w właściwość loader:

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