Caricamento dei dati della pagina dai parametri URL dall'archivio in React Router

Ora possiamo aggiungere prodotti alla nostra applicazione. Avvia l'applicazione, aggiungi con il pulsante un paio di prodotti. Se ora clicchiamo sui prodotti stessi nell'elenco, vedremo che ogni prodotto ha ancora una pagina statica identica, ed è questo che affronteremo in questa e nelle prossime lezioni.

È necessario notare anche un altro punto. In generale, l'intero URL è diviso in segmenti - queste sono le parti dell'URL tra i caratteri /. Probabilmente ricordi che durante la creazione di questa applicazione abbiamo specificato il percorso 'products/:productId', bene, :productId qui è chiamato segmento dinamico. Prima di esso viene posto il simbolo ':'. I valori in questo segmento cambieranno, sono proprio loro che finiscono nei parametri URL (URL Params o params), che vengono passati al loader sotto una certa chiave, nel nostro caso sarà params.productId.

Dai un'occhiata alla barra degli indirizzi nel browser, quando clicchi sui prodotti nell'elenco. Vedrai, che l'ultimo segmento nella barra degli indirizzi cambia, sono proprio questi valori che finiranno nel loader. E i nostri prodotti nell'archivio hanno un id unico generato da noi, quindi ci verrà caricato il prodotto di cui abbiamo bisogno.

E ora, dopo una piccola digressione, lavoriamo finalmente sulla pagina del prodotto, o più specificamente - sul caricamento dei dati dall'archivio.

Ripetiamo il processo familiare. Per prima cosa in forStorage.js aggiungiamo la funzione getProduct per ottenere i dati di un prodotto specifico dall'archivio tramite id. Qui passeremo alla funzione id e, di conseguenza, se il prodotto è "cachato", allora verrà visualizzato senza ritardo:

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

Successivamente, dobbiamo ottenere l'array dei prodotti e tra questi trovare il nostro prodotto tramite l' id passato:

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

Prendi l'applicazione creata da te nei compiti delle lezioni precedenti. Usando il materiale della lezione, crea in forStorage.js la funzione getStudent per ottenere i dati di uno studente tramite id.