Учитавање података странице преко URL параметара из складишта у React Router-у

Сада можемо да додајемо производе у нашу апликацију. Покрените апликацију, додајте дугметом пар производа. Ако сада кликнемо на саме производе у листи, видећемо да сваки производ још увек има исту статичку страницу, којом ћемо се бавити у овом и наредним лекцијама.

Такође, потребно је напоменути још једну ствар. У принципу, цео URL се дели на сегменте - то су делови URL-а између знакова /. Вероватно се сећате да смо приликом креирања ове апликације наводили путању 'products/:productId', па, :productId се овде назива динамички сегмент. Пре њега се ставља знак ':'. Вредности у овом сегменту ће се мењати, управо оне улазе у URL параметре (URL Params или params), који се прослеђују учитавачу под одређеним кључем, у нашем случају то ће бити params.productId.

Погледајте адресну траку у прегледачу, када кликнете на производе у листи. Видећете, да се последњи сегмент у адресној траци мења, управо те вредности ће ући у учитавач. А наши производи у складишту имају јединствени генерисани id, тако да ће нам се учитати тај производ који нам је потребан.

А сада, након краћег одступања, хајде да коначно порадимо на страници производа, тачније - на учитавању података из складишта.

Поновимо познати процес. За почетак у forStorage.js додајмо функцију getProduct за добијање података конкретног производа из складишта по id. Овде ћемо већ проследити у функцију id и, према томе, ако је производ "кеширан", онда ће се приказати без одлагања:

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

Затим нам је потребно да добијемо низ производа и међу њима да пронађемо наш производ по прослеђеном 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;
}

Узмите апликацију коју сте креирали у задацима из претходних лекција. Користећи се материјалима лекције, креирајте у forStorage.js функцију getStudent за добијање података студента по id.