Дар React Router аз ҳофизаи додаҳо барои саҳифа бо параметрҳои URL-и бор кардан

Акнун мо метавонем маҳсулотҳоро ба барномаи худ илова кунем. Барномаро оғоз кунед, якчанд маҳсулотро бо тугма илова кунед. Агар акнун мо рӯи худи маҳсулотҳо дар рӯйхат клик кунем, он гоҳ хоҳем дид, ки ҳар як маҳсулот то ҳол як саҳифаи статикии якхела дорад, ки мо дар ин ва дарсҳои оянда ба он мепардозем.

Инчунин зарур аст, ки як лаҳзаи дигарро қайд кунем. Дар асл, тамоми 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 эҷод кунед.