Gegevens van paginaladen via URL-parameters uit opslag in React Router

Nu kunnen we producten toevoegen aan onze applicatie. Start de applicatie, voeg met de knop een paar producten toe. Als we nu op de producten zelf in de lijst klikken, zien we dat elk product nog steeds dezelfde statische pagina heeft, hier gaan we ons in deze en volgende lessen mee bezighouden.

Ook is het nodig om nog een punt op te merken. In het geheel is de URL verdeeld in segmenten - dit zijn de delen van de URL tussen de tekens /. Je herinnert je waarschijnlijk dat bij het maken van deze applicatie we het pad 'products/:productId' opgaven, dus :productId wordt hier een dynamisch segment genoemd. Ervoor staat het symbool ':'. Waarden in dit segment zullen veranderen, precies deze komen in de URL-parameters (URL Params of params), die worden doorgegeven aan de loader onder een bepaalde sleutel, in ons geval zal dit params.productId zijn.

Kijk naar de adresbalk in de browser, wanneer je op producten in de lijst klikt. Je zult zien, dat het laatste segment in de adresbalk verandert, precies deze waarden zullen in de loader terechtkomen. En onze producten in de opslag hebben een unieke door ons gegenereerde id, zo zal het product dat we nodig hebben worden geladen.

En nu, na een kleine uitweiding, laten we eindelijk aan de slag gaan met de productpagina, om precies te zijn - met het laden van gegevens uit opslag.

Laten we het bekende proces herhalen. Om te beginnen voegen we in forStorage.js de functie getProduct toe voor het ophalen van gegevens van een specifiek product uit opslag op basis van id. Hier zullen we de functie id doorgeven en, dienovereenkomstig, als het product "gecachet" is, dan wordt het zonder vertraging weergegeven:

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

Vervolgens moeten we de array van producten ophalen en daarin ons product zoeken op basis van de doorgegeven id:

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

Neem de applicatie die je hebt gemaakt in de opdrachten bij vorige lessen. Gebruikmakend van de lesmaterialen, maak je in forStorage.js de functie getStudent aan voor het ophalen van studentgegevens op basis van id.