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:

import { 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:

export 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:

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

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

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

Pegue o aplicativo criado por você nas tarefas das lições anteriores. Usando os materiais da lição, escreva no arquivo root.jsx a função loader para carregar os dados dos estudantes e adicione-a ao objeto de rota em main.jsx.