Carregador de dados para rota no React Router

Na lição anterior, extraímos os dados dos produtos do armazenamento. Agora, esses dados precisam ser carregados no elemento de rota. Para isso, é usada uma função carregadora (loader). Agora vamos criá-la.

Vamos abrir root.jsx, adicionar aqui uma linha de importação getProducts de forStorage.js:

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

Imediatamente após as linhas de importação e antes da função Root, vamos escrever o código da função loader, que através de getProducts irá retornar os dados dos produtos do armazenamento. Geralmente, tais funções devem ser escritas em um arquivo separado, mas vamos ser um pouco preguiçosos, então não prestem atenção no aviso:

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

Agora vamos adicionar a importação do nosso carregador em main.jsx. Este carregador será para a raiz, então vamos chamá-lo de rootLoader:

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

E vamos adicioná-lo ao nosso objeto de rota na propriedade loader:

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