URL paramalaryndan sahypa maglumatlaryny ýüklemek, React Router-da ammaryňyzdan

Indi biz öňümize önümleri goşup bilýäris. Öňümizi işletmäge başlaň, düwmäniň kömegi birnäçe önüm goşuň. Indi sanawda öňümiziň özüne basanymyzda, her önümiň entek şol bir statik sahypasy bardygyny göreris, bu sapakda we indiki sapaklarda biz şol sahypa bilen işleris.

Şeýle hem, ýene bir nokada üns bermek gerek. Umuman, tutuş URL bölümler - bölünýär - bu / nyşanlarynyň arasyndaky URL-iň bölekleridir. Siz belki ýadyňyzda, bu öňümi döredilende, biz 'products/:productId' ýoluny görkezdik, şonuň üçin :productId bu ýerde dinamiki bölüm diýilýär. Onuň öňünde ':' nyşany goýulýar. Bu bölümdeki görnüşler üýtgär, şol bir URL parametry (URL Params ýa-da params) ýükleýji üçin belli bir açar astynda ugradylýar, biziň ýagdaýymyzda bu params.productId bolar.

Brauzerdeki salgys setirine serediň, sanawdaky önümlere basanyňyzda. Siz salgys setirindäki iň soňky bölümiň üýtgeýändigini görersiňiz, edil şol görnüşler ýükleýjide duşer. Bizim amarymyzdaky önümler özboluşly generirlenen id - e eýe, şonuň üçin bize gerek bolan önüm ýükleniler.

Indi kiçiräk aralykdan soň, ahyrsoňy öňüm sahypasy bilen, dogrusy - ammaryňyzdan maglumat ýüklemek bilen işleýeli.

Tanyş prosesi gaýtalalyň. Ilki bilen forStorage.js faýlynda id boýunça ammaryňyzdan belli bir önümiň maglumatlaryny almak üçin getProduct funksiýasyny goşalyň. Bu ýerde biz funksiýa üçin id ugradyarys we, şonuň ýaly-da, önümimiz "keşirlen" bolsa, gijikmesiz görkeziler:

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

Indiki adymda biz önümleriň sanawyny almaly we olaryň arasynda ugradylyan id boýunça önümi tapmaly:

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

Öňki sapaklaryň görewnamalarynda döreden öňümizi alyň. Sapagyň materiallaryny ulanyp, forStorage.js faýlynda id boýunça talybyň maglumatlaryny almak üçin getStudent funksiýasyny dörediň.