Laai bladsy data op volgens URL parameters uit die stoor in React Router

Nou kan ons produkte by ons aansoek voeg. Begin die aansoek, voeg 'n paar produkte met die knoppie by. As ons nou op die produkte self in die lys klik, sal ons sien dat elke produk nog steeds dieselfde statiese bladsie het, waarmee ons in hierdie en volgende lesse sal werk.

Daar is ook nog 'n oomblik om op te let. Oor die algemeen word die hele URL in segmente verdeel - dit is die dele van die URL tussen die simbole /. Jy sal onthou dat ons, toe ons hierdie aansoek geskep het, die pad 'products/:productId' gespesifiseer het, so :productId word hier genoem dinamiese segment. Die simbool ':' word voor dit geplaas. Die waardes in hierdie segment sal verander, en dit is presies wat in die URL parameters (URL Params of params) val, wat aan die laaier oorgedra word onder 'n sekere sleutel, in ons geval sal dit wees params.productId.

Kyk na die adresbalk in die blaaier, wanneer jy op produkte in die lys klik. Jy sal sien, dat die laaste segment in die adresbalk verander, en presies hierdie waardes sal in die laaier val. En ons produkte in die stoor het 'n unieke id wat ons gegenereer het, so sal die produk wat ons nodig het, vir ons gelaai word.

En nou, na 'n klein uitstappie, laat ons eindelik met die produkbladsy werk, en spesifiek - met die laai van data uit die stoor.

Kom ons herhaal die bekende proses. Eerstens in forStorage.js voeg ons die funksie getProduct by om data van 'n spesifieke produk uit die stoor volgens id te kry. Hier sal ons reeds die id aan die funksie oordra en, gevolglik, as die produk vir ons "gekas" is, sal dit sonder vertraging vertoon word:

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

Verder moet ons 'n versameling produkte kry en onder hulle ons produk vind volgens die oorgedraagde 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 die aansoek wat jy in die opdragte vir vorige lesse geskep het. Gebruik die materiaal van die les, skep in forStorage.js die funksie getStudent om data van 'n student volgens id te verkry.