Încărcarea datelor paginii prin parametrii URL din stocare în React Router

Acum putem adăuga produse în aplicația noastră. Porniți aplicația, adăugați câteva produse cu butonul. Dacă acum facem clic pe produsele din listă, vom vedea că fiecare produs are încă aceeași pagină statică, cu care ne vom ocupa în această lecție și în lecțiile următoare.

De asemenea, este necesar să menționăm un alt aspect. În general, întregul URL este împărțit în segmente - acestea sunt părți ale URL-ului între caracterele /. Probabil vă amintiți că la crearea acestei aplicații am specificat calea 'products/:productId', deci :productId se numește aici segment dinamic. În fața lui se plasează caracterul ':'. Valorile din acest segment se vor schimba, tocmai acestea ajung în parametrii URL (URL Params sau params), care sunt transmise încărcătorului sub o cheie specifică, în cazul nostru va fi params.productId.

Aruncați o privire la bara de adrese din browser, când faceți clic pe produse din listă. Veți vedea că ultimul segment din bara de adrese se schimbă, tocmai aceste valori vor ajunge în încărcător. Iar produsele noastre din stocare au un id unic generat de noi, astfel va fi încărcat produsul de care avem nevoie.

Și acum, după o scurtă pauză, haideți să lucrăm în sfârșit cu pagina produsului, mai precis - cu încărcarea datelor din stocare.

Să repetăm procesul familiar. Pentru început, în forStorage.js să adăugăm funcția getProduct pentru obținerea datelor unui anumit produs din stocare după id. Aici vom transmite deja în funcție id și, în consecință, dacă produsul nostru este "cache-uit", atunci va fi afișat fără întârziere:

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

În continuare, trebuie să obținem matricea de produse și să găsim produsul nostru printre ele după id transmis:

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

Luați aplicația creată de dvs. în sarcinile din lecțiile anterioare. Folosind materialele lecției, creați în forStorage.js funcția getStudent pentru obținerea datelor studentului după id.