React Router'da ma'lumot qo'shish

Oldingi darslarda biz yuklovchini tayyorladik va ma'lum bir marshrut bo'yicha ma'lumotlarni ombordan yuklab olishni o'rgandik. Keling, endi ilovamiz misolida yangi mahsulot qo'shish va uning ma'lumotlarini omborga yozishni o'rganamiz.

root.jsx faylini ochamiz va nav dan oldin yangi mahsulot qo'shish uchun tugmani, uni forma tegiga o'rab qo'shamiz. Shuningdek, tugma va ro'yxatimizni yana bir div bilan #menu ga o'rab chiqamiz. Maket endi shunday ko'rinadi:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">mahsulot qo'shish</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Nomsiz</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>bu yerda mahsulotlar yo'q ...</i>
			</p>
			)}
		</div>

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

Agar biz hozir ishlab chiquvchi panelidagi 'Tarmoq' yorlig'iga o'tsak, so'ngra tugmamizni bossek, serverga xato so'rov yuborilganini ko'ramiz. React Router yordamida biz serverga so'rov yubormasdan, mijoz tomonida marshrutlashtirishdan foydalanamiz.

Buning uchun form tegini React Router komponenti Form ga o'zgartiramiz. Boshlanish uchun Form importini qo'shamiz:

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

Endi kod bo'lagidagi form teglarini almashtiramiz:

<Form method="post">
	<button type="submit">mahsulot qo'shish</button>
</Form>

Ilovamizni qayta yuklang va ishlab chiquvchi panelini tekshiring. Mahsulot qo'shish tugmasini bosing - endi serverga so'rov yo'q (hozircha xatoga e'tibor bermang).

Oldingi darslar uchun topshiriqlarda yaratgan ilovangizni oling. Dars materiallaridan foydalanib, Root funksiyasining vertisini tuzating, form tegida talaba qo'shish uchun tugma qo'shing. Tugma bosilganda serverga so'rov yuborilishiga ishonch hosil qiling.

Endi form tegini Form komponentiga almashtiring. Talaba qo'shish tugmasi bosilganda serverga so'rov yuborilmasligiga ishonch hosil qiling.