Carga de datos de página por parámetros URL desde el almacenamiento en React Router

Ahora podemos agregar productos a nuestra aplicación. Inicie la aplicación, agregue con el botón un par de productos. Si ahora hacemos clic en los productos mismos en la lista, veremos que cada producto todavía tiene la misma página estática, que nos ocuparemos de ella en esta y las siguientes lecciones.

También es necesario señalar otro punto. En general, toda URL se divide en segmentos: estas son las partes de la URL entre los caracteres /. Usted probablemente recuerde que al crear esta aplicación especificamos la ruta 'products/:productId', pues bien, :productId se llama aquí segmento dinámico. Antes de él se coloca el símbolo ':'. Los valores en este segmento cambiarán, precisamente estos llegan a los parámetros URL (URL Params o params), que se pasan al cargador bajo una clave determinada, en nuestro caso será params.productId.

Eche un vistazo a la barra de direcciones en el navegador, cuando hace clic en los productos en la lista. Verá que el último segmento en la barra de direcciones cambia, precisamente estos valores llegarán al cargador. Y nuestros productos en el almacenamiento tienen un id único generado por nosotros, así que se cargará el producto que necesitamos.

Y ahora, después de una pequeña digresión, vamos finalmente a trabajar con la página del producto, específicamente - con la carga de datos desde el almacenamiento.

Repitamos el proceso familiar. Para empezar, en forStorage.js agreguemos la función getProduct para obtener datos de un producto específico del almacenamiento por id. Aquí ya pasaremos a la función el id y, en consecuencia, si el producto está "en caché", entonces se mostrará sin demora:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
}

A continuación, necesitamos obtener el array de productos y entre ellos encontrar nuestro producto por el id pasado:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	return product ?? null;
}

Tome la aplicación creada por usted en las tareas de las lecciones anteriores. Usando los materiales de la lección, cree en forStorage.js la función getStudent para obtener datos del estudiante por id.