React Router-га маълумот қўшиш

Ўтган дарсларда биз загрузкагични тайёрладик ва маълумотларни маълу маршрутдан сақловичга юклашни ўргандик. Энди бизнинг иловамиз мисолида янги маҳсулот қўшиш ва унинг маълумотларини сақловичга ёзишни ўрганамиз.

root.jsx файлини очамиз ва nav олдига янги маҳсулот қўшиш учун тугмани форма тегига ўраб, макетга қўшамиз. Шунингдек, тугма ва бизнинг рўйхатни яна бир дивга #menu ила ўраймиз. Макет энди шундай кўринади:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">маҳсулот қўшиш</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Номланмаган</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>бу ерда маҳсулот йўқ ...</i>
			</p>
			)}
		</div>

		<div id="product">
			<Outlet />
		</div>
	</div>
);

Агар биз хозир ишлаб чиқарувчи панелининг 'Тармоқ' варақчасига кириб, сўнгра бизнинг тугмачамизни боссак, серверга хатоли запрос кўрамиз. React Router ёрдамида биз серверга запросни исключ қилиб, мижоз томонидаги маршрутлашдан фойдаланамиз.

Бунинг учун form тегини React Router-нинг Form компонентига алмаштирамиз. Аввал Form ни импорт қиламиз:

import { Form } from 'react-router-dom';

Энди код бўлагидаги form тегларини алмаштирамиз:

<Form method="post">
	<button type="submit">маҳсулот қўшиш</button>
</Form>

Иловамизни қайта юкланг ва ишлаб чиқарувчи панелини яна текшириб кўринг. Маҳсулот қўшиш тугмасини босинг - энди серверга запрос йўқ (хатоликка аҳволи ҳозирча эътибор берманг).

Ўтган дарслардаги вазифаларда яратган иловангизни олинг. Дарс материалларидан фойдаланиб, Root функциясининг версткасини тузатинг, form тегида талаба қўшиш учун тугма қўшинг. Тугма босилганда серверга запрос юборилишини текширинг.

Энди эса form тегини Form компонентига алмаштиринг. Талаба қўшиш тугмаси босилганда серверга запрос юборилмаслигини текширинг.