Obtención de datos del cargador mediante parámetros URL en React Router

En la lección anterior escribimos una función para obtener datos de la página del producto, importemos getProduct en el archivo product.jsx:

import { getProduct } from '../forStorage';

Escribamos la función del cargador loader inmediatamente después de la importación y antes de la función Product. Pasémosle los parámetros URL:

export async function loader({ params }) {
	const product = await getProduct(params.productId);
	return { product };
}

También importemos el hook useLoaderData para usar los datos obtenidos por el cargador:

import { useLoaderData } from 'react-router-dom';

Apliquemos useLoaderData, reemplazando en consecuencia la línea con la creación del objeto product al inicio de la función Product por lo siguiente:

const { product } = useLoaderData();

Y, por supuesto, cambiaremos un poco nuestro maquetado, ya que eliminamos el antiguo objeto product. Reemplacemos el contenido de los párrafos:

<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

Por lo siguiente:

<p>Nombre: {product.name ? product.name : <i>sin nombre</i>}</p>
<p>Precio: {product.cost ? product.cost : <i>desconocido</i>}</p>
<p>Cantidad: {product.amount ? product.amount : <i>desconocida</i>}</p>

Nos queda abrir main.jsx y agregar allí la importación de loader, llamémoslo productLoader:

import Product, {
	loader as productLoader,
} from './routes/product';

Y especificarlo como cargador para el objeto de ruta de la página del producto, agregándolo en children después de la propiedad element:

children: [
	{
		path: 'products/:productId',
		element: <Product />,
		loader: productLoader,
	},
],

¡Listo, hemos resuelto la carga de datos para la página del producto! Sin embargo, no tenemos nada para cargar todavía. Ejecute la aplicación, agregue algunos productos y haga clic en ellos en la lista para asegurarse de que todo funciona.

Tome la aplicación creada por usted en las tareas de lecciones anteriores. Usando los materiales de la lección, implemente el loader, conéctelo, utilice los datos de él para la página del estudiante.