Lasting av sidedata fra URL-parametere fra lagring i React Router

Nå kan vi legge til produkter i applikasjonen vår. Start applikasjonen, legg til et par produkter med knappen. Hvis vi nå klikker på selve produktene i listen, vil vi se at hvert produkt fortsatt har den samme statiske siden, som vi vil jobbe med i denne og de påfølgende leksjonene.

Det er også nødvendig å merke seg et annet punkt. Generelt er hele URL-en delt inn i segmenter - dette er delene av URL-en mellom tegnet /. Du husker sikkert at da vi opprettet denne applikasjonen, spesifiserte vi stien 'products/:productId', så :productId kalles her dynamisk segment. Foran det plasseres tegnet ':'. Verdiene i dette segmentet vil endre seg, det er disse som havner i URL-parametrene (URL Params eller params), som sendes til lasteren under en bestemt nøkkel, i vårt tilfelle vil det være params.productId.

Ta en titt på adresselinjen i nettleseren når du klikker på produkter i listen. Du vil se at det siste segmentet i adresselinjen endres, det er disse verdiene som vil havne i lasteren. Og våre produkter i lagringen har en unik generert id av oss, dermed vil produktet vi trenger bli lastet inn.

Og nå, etter en liten avstikker, la oss endelig jobbe med produktsiden, mer spesifikt - med lasting av data fra lagringen.

La oss gjenta den kjente prosessen. Til å begynne med i forStorage.js legger vi til funksjonen getProduct for å hente data for et spesifikt produkt fra lagringen etter id. Her vil vi allerede sende id til funksjonen og, følgelig, hvis produktet vårt er "bufret", vil det vises uten forsinkelse:

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

Deretter må vi hente en matrise med produkter og blant dem finne vårt produkt etter den sendte 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 applikasjonen du opprettet i oppgavene til de foregående leksjonene. Ved å bruke materialet fra leksjonen, opprett i forStorage.js funksjonen getStudent for å hente studentdata etter id.