Дар 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-ро ба компоненти Form-и React Router иваз кунем. Импорти Form-ро аввал илова кунем:

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

Акнун тегҳои form-ро дар порчаи код иваз кунем:

<Form method="post">
	<button type="submit">маҳсул илова кун</button>
</Form>

Барномаи моро аз нав бор кунед ва бори дигар ба панели таҳиягар нигаред. Тугмаи илова кардани маҳсулро пахш кунем - акнун дигар дархост ба сервер нест (ҳоло ба хато диққат надиҳед).

Барномаеро, ки шумо дар вазифаҳо барои дарсҳои гузашта сохтаед, гиред. Истифода бурда аз маводҳои дарс, верстаи функсияи Root ислоҳ кунед, тугма барои илова кардани донишҷӯро дар теги form илова кунед. Боварӣ ҳосил кунед, ки дар натиҷаи пахши тугма дархост ба сервер рӯй медиҳад.

Ва акнун теги form-ро ба компоненти Form иваз кунед. Боварӣ ҳосил кунед, ки дар натиҷаи пахш ба тугмаи илова кардани донишҷӯ дархост ба сервер фиристода намешавад.