URL parametrelerinden depolama alanından React Router'da sayfa verilerini yükleme

Artık uygulamamıza ürünler ekleyebiliriz. Uygulamayı başlatın, butonla birkaç ürün ekleyin. Şimdi listedeki ürünlerin kendilerine tıklarsak, her ürünün henüz aynı statik sayfaya sahip olduğunu göreceğiz, bu ve sonraki derslerde bu sayfa ile ilgileneceğiz.

Ayrıca bir noktayı daha belirtmek gerekir. Genel olarak, tüm URL segmentlere bölünür - bunlar / karakterleri arasındaki URL parçalarıdır. Muhtemelen hatırlarsınız, bu uygulamayı oluştururken 'products/:productId' yolunu belirtmiştik, işte buradaki :productId dinamik segment olarak adlandırılır. Önüne ':' sembolü konur. Bu segmentteki değerler değişecek ve tam olarak bunlar belirli bir anahtar altında yükleyiciye iletilen URL parametrelerine (URL Params veya params) girer, bizim durumumuzda bu params.productId olacaktır.

Listedeki ürünlere tıkladığınızda tarayıcıdaki adres çubuğuna bir göz atın. Adres çubuğundaki son segmentin değiştiğini göreceksiniz, tam olarak bu değerler yükleyiciye girecek. Ve depolama alanımızdaki ürünlerimizin benzersiz bir şekilde oluşturulmuş id'si var, böylece ihtiyacımız olan ürün bize yüklenecek.

Ve şimdi küçük bir ara verdikten sonra nihayet ürün sayfasıyla, daha doğrusu depolama alanından veri yükleme ile çalışalım.

Tanıdık süreci tekrarlayalım. Öncelikle forStorage.js dosyasına, belirli bir ürünün verilerini id'ye göre depolama alanından almak için getProduct fonksiyonunu ekleyelim. Burada fonksiyona id'yi ileteceğiz ve buna bağlı olarak, eğer ürünümüz "önbelleğe alınmışsa" gecikme olmadan görünecek:

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

Sonraki adım, ürün dizisini almak ve aranılan ürünü iletilen id'ye göre bulmaktır:

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

Önceki derslerin görevlerinde oluşturduğunuz uygulamayı alın. Ders materyallerinden yararlanarak, forStorage.js dosyasında id'ye göre öğrenci verilerini almak için getStudent fonksiyonunu oluşturun.