Chargement des données de page à partir des paramètres URL depuis le stockage dans React Router

Maintenant, nous pouvons ajouter des produits à notre application. Lancez l'application, ajoutez avec le bouton quelques produits. Si nous cliquons maintenant sur les produits eux-mêmes dans la liste, nous verrons que chaque produit a pour l'instant la même page statique, c'est ce dont nous nous occuperons dans cette leçon et les suivantes.

Il est également nécessaire de noter un autre point. De manière générale, toute URL est divisée en segments - ce sont les parties de l'URL entre les caractères /. Vous vous souvenez probablement qu'à la création de cette application, nous avons indiqué le chemin 'products/:productId', eh bien :productId est appelé ici un segment dynamique. Il est précédé du symbole ':'. Les valeurs dans ce segment vont changer, ce sont elles qui arrivent dans les paramètres URL (URL Params ou params), qui sont transmis au chargeur sous une clé spécifique, dans notre cas ce sera params.productId.

Jetez un œil à la barre d'adresse du navigateur, lorsque vous cliquez sur les produits dans la liste. Vous verrez que le dernier segment dans la barre d'adresse change, ce sont précisément ces valeurs qui arriveront dans le chargeur. Et nos produits dans le stockage ont un id unique généré par nous, ainsi le produit dont nous avons besoin sera chargé.

Et maintenant, après cette petite digression, travaillons enfin sur la page du produit, plus précisément - sur le chargement des données depuis le stockage.

Répétons le processus familier. Pour commencer, dans forStorage.js ajoutons la fonction getProduct pour obtenir les données d'un produit spécifique du stockage par son id. Ici, nous allons transmettre à la fonction le id et, par conséquent, si le produit est "mis en cache", alors il sera affiché sans délai :

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

Ensuite, nous devons obtenir le tableau des produits et parmi eux trouver notre produit par l'id transmis :

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;
}

Prenez l'application que vous avez créée dans les exercices des leçons précédentes. En utilisant le matériel de la leçon, créez dans forStorage.js la fonction getStudent pour obtenir les données d'un étudiant par son id.