Ladda sidans data via URL-parametrar från lagret i React Router

Nu kan vi lägga till produkter i vår applikation. Starta applikationen, lägg till några produkter med knappen. Om vi nu klickar på produkterna i listan kommer vi att se att varje produkt fortfarande har samma statiska sida, som vi kommer att arbeta med i den här och de följande lektionerna.

Det är också nödvändigt att notera en annan punkt. Generellt sett är hela URL:en uppdelad i segment - det är delar av URL:en mellan tecknen /. Du kommer förmodligen ihåg att när vi skapade den här applikationen angav vi sökvägen 'products/:productId', så :productId kallas här för ett dynamiskt segment. Före det sätts tecknet ':'. Värdena i det här segmentet kommer att ändras, det är de som hamnar i URL-parametrarna (URL Params eller params), som skickas till laddaren under en specifik nyckel, i vårt fall kommer det att vara params.productId.

Ta en titt på adressfältet i webbläsaren när du klickar på produkter i listan. Du kommer att se att det sista segmentet i adressfältet ändras, det är dessa värden som kommer att hamna i laddaren. Och våra produkter i lagret har ett unikt id som vi genererat, således kommer den produkt som vi behöver att laddas.

Och nu, efter en liten avvikelse, låt oss äntligen arbeta med produktsidan, mer specifikt - med att ladda data från lagret.

Låt oss upprepa den välbekanta processen. Först i forStorage.js lägger vi till funktionen getProduct för att hämta data för en specifik produkt från lagret via id. Här kommer vi att skicka id till funktionen och, följaktligen, om produkten är "cachead" hos oss, så kommer den att visas utan fördröjning:

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

Därefter behöver vi hämta arrayen med produkter och bland dem hitta vår produkt via det skickade 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;
}

Ta applikationen som du skapade i uppgifterna till de tidigare lektionerna. Använd lektionens material, skapa i forStorage.js funktionen getStudent för att hämta studentdata via id.