Uso de datos obtenidos por el cargador en React Router

En la lección anterior obtuvimos datos del almacenamiento usando loader. Para utilizar estos datos, usamos el hook useLoaderData. Abramos el archivo root.jsx y agreguemos el hook en la importación:

import { Outlet, Link, useLoaderData } from 'react-router-dom';

En la función Root ahora obtendremos los datos en la constante products y trabajaremos con ella. Si tenemos algunos productos, la lista se mostrará; si no, mostraremos en el párrafo 'no products here ...'. En la etiqueta nav ahora usamos un ciclo estándar para mostrar los productos obtenidos. Cada elemento estará envuelto en el componente Link y cada uno tendrá su propia dirección (hablaremos de esto más tarde). En consecuencia, si un producto no tiene nombre, se mostrará 'Unnamed' por defecto. Entonces, considerando lo anterior, ahora nuestro código para la función Root será así:

function Root() {

	const { products } = useLoaderData();
	return (
		<div id="main">
			{products.length ? (
				<nav>
					{products.map((product) => (
						<Link key={product.id} to={`products/${product.id}`}>
							{product.name ? product.name : <i>Unnamed</i>}
						</Link>
					))}
				</nav>
			) : (
				<p><i>no products here ...</i></p>
			)}
			<div id="product">
				<Outlet />
			</div>
		</div>
	);
}

Si reiniciamos la aplicación ahora y vamos a la página principal, veremos solo 'no products here ...', ya que aún no hemos guardado ningún producto en el almacenamiento.

Tome la aplicación creada por usted en las tareas de lecciones anteriores. Usando los materiales de la lección, agregue la visualización de los datos obtenidos del cargador con estudiantes, como se describe en la lección.