Səhifə məlumatlarının URL parametrləri ilə saxlanmasından yüklənməsi React Router-də

İndi biz proqramımıza məhsul əlavə edə bilərik. Proqramı işə salın, düymə ilə bir neçə məhsul əlavə edin. İndi siyahıdakı məhsulların özlərinə klikləsək, görərik ki, hər məhsulun hələ də eyni statik səhifəsi var, biz bu səhifə ilə bu və sonrakı dərslərdə məşğul olacağıq.

Həmçinin daha bir məqamı qeyd etmək lazımdır. Ümumiyyətlə, bütün URL seqmentlərə bölünür - bu / simvolları arasındakı URL hissələridir. Yəqin ki, xatırlayırsınız ki, bu proqramı yaratdıqda biz 'products/:productId' yolunu göstərmişdik, beləliklə :productId burada dinamik seqment adlanır. Ondan əvvəl ':' simvolu qoyulur. Bu seqmentdəki dəyərlər dəyişəcək, məhz onlar URL parametrlərinə (URL Params və ya params) düşür, hansı ki, müəyyən açar altında yükləyiciyə ötürülür, bizim vəziyyətimizdə bu params.productId olacaq.

Brauzerdə ünvan sətrinə nəzər yetirin, siyahıdakı məhsullara kliklədiyiniz zaman. Görəcəksiniz ki, ünvan sətrindəki son seqment dəyişir, məhz bu dəyərlər yükləyiciyə düşəcək. Və saxlanmasında olan məhsullarımızın unikal id-si var, beləliklə bizə lazım olan məhsul yüklənəcək.

İndi isə kiçik bir aradan sonra nəhayət məhsul səhifəsi ilə işləyək, daha dəqiqi - məlumatların saxlanmasından yüklənməsi ilə.

Tanış prosesi təkrarlayaq. Əvvəlcə forStorage.js faylına id-ə görə saxlanmadan konkret məhsulun məlumatlarını əldə etmək üçün getProduct funksiyasını əlavə edək. Burada artıq funksiyaya id ötürəcəyik və, müvafiq olaraq, əgər məhsulumuz "keşlənibsə", onda gecikmə olmadan çıxacaq:

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

Sonra bizə məhsullar massivini əldə etmək və onların arasında ötürülmüş id-ə görə məhsulumuzu tapmaq lazımdı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;
}

Əvvəlki dərslərin tapşırıqlarında yaratdığınız proqramı götürün. Dərsin materiallarından istifadə edərək, forStorage.js faylında id-ə görə tələbə məlumatlarını əldə etmək üçün getStudent funksiyasını yaradın.