Lehe andmete laadimine URL-i parameetrite põhjal hoidlast React Routeris

Nüüd saame lisada tooteid meie rakendusse. Käivitage rakendus, lisage nupuga mõni toode. Kui nüüd klõpsame nimekirjas toodetel endil, siis näeme, et igal tootel on veel sama staatiline lehekülg, millega me tegeleme selles ja järgmistes õppetundides.

Samuti on vaja märkida veel üks moment. Üldiselt jaguneb kogu URL segmentideks - need on URL-i osad sümbolite / vahel. Te ilmselt mäletate, et selle rakenduse loomisel määrasime tee 'products/:productId', nii et :productId nimetatakse siin dünaamiliseks segmendiks. Selle ette paigutatakse sümbol ':'. Väärtused selles segmendis muutuvad, täpselt need satuvad URL-i parameetritesse (URL Params või params), mis edastatakse laadijale kindla võtme all, meie juhul on see params.productId.

Vaadake brauseri aadressiribale, kui klõpsate nimekirjas toodetel. Näete, et aadressirea viimane segment muutub, täpselt need väärtused satuvad laadijasse. Ja meie tooted hoidlas omavad unikaalset meie poolt genereeritud id, seega laaditakse meile see toode, mida vajame.

Ja nüüd, peale väikest kõrvalepõiget, hakkame lõpuks töötama toote leheküljega, täpsemalt - andmete laadimisega hoidlast.

Kordame tuttavat protsessi. Alustuseks forStorage.js failis lisame funktsiooni getProduct konkreetse toote andmete saamiseks hoidlast id järgi. Siin me juba edastame funktsiooni id ja vastavalt, kui toode on "vahemällu salvestatud", siis kuvatakse see viivituseta:

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

Järgmisena peame saama toodete massiivi ja sealt leidma meie toote vastava id järgi:

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

Võtke rakendus, mille lõite eelmiste õppetundide ülesannetes. Kasutades õppetunni materjale, looge forStorage.js failis funktsioon getStudent õpilase andmete saamiseks id järgi.