Cargador de datos para la ruta en React Router

En la lección anterior, extrajimos los datos de productos del almacenamiento. Ahora estos datos deben cargarse en el elemento de la ruta. Para esto se utiliza la función cargadora (loader). Ahora la crearemos.

Abramos root.jsx, agreguemos aquí la línea de importación getProducts desde forStorage.js:

import { getProducts } from '../forStorage'

Inmediatamente después de las líneas de importación y antes de la función Root escribamos el código de la función loader, que a través de getProducts nos devolverá los datos de productos desde el almacenamiento. En general, tales funciones deben escribirse en un archivo separado, pero nosotros seremos un poco perezosos, así que no presten atención a la advertencia:

export async function loader() {
	const products = await getProducts();
	return { products };
}

Ahora agreguemos la importación de nuestro cargador a main.jsx. Este cargador será para la raíz, así que lo llamaremos rootLoader:

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

Y lo agreguemos a nuestro objeto de ruta en la propiedad loader:

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

Tome la aplicación creada por usted en las tareas de lecciones anteriores. Utilizando los materiales de la lección, escriba en el archivo root.jsx la función loader para cargar los datos de los estudiantes y agréguela al objeto de ruta en main.jsx.