Chargeur de données pour la route dans React Router

Dans la leçon précédente, nous avons extrait les données des produits du stockage. Maintenant, ces données doivent être chargées dans l'élément de route. Pour cela, on utilise une fonction chargeur (loader). Maintenant, nous allons la créer.

Ouvrons root.jsx, ajoutons ici une ligne d'importation pour getProducts depuis forStorage.js :

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

Immédiatement après les lignes d'importation et avant la fonction Root, écrivons le code de la fonction loader, qui via getProducts va nous retourner les données des produits depuis le stockage. En général, de telles fonctions doivent être écrites dans un fichier séparé, mais nous allons être un peu paresseux, donc ne faites pas attention à l'avertissement :

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

Maintenant, ajoutons l'importation de notre chargeur dans main.jsx. Ce chargeur sera pour notre racine, donc nous l'appellerons rootLoader :

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

Et ajoutons-le à notre objet de route dans la propriété loader :

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