React Router-da Melumat Elavesi

Kecen derslerde biz yukleyici hazırladıq ve muəyyən bir marşrut üzre melumatları depodan cıxardıq. Gəlin indi nümunə olaraq proqramımızda yeni məhsul əlavə etməyi və onun melumatlarını depoya yazmağı tanıyaq.

root.jsx faylını açaq ve nav-dan əvvəl yeni məhsul əlavə etmək üçün düyməni form teq-ine sarıyarak əlavə edək. Həmçinin indi düyməni ve siyahımızı başqa bir div ile #menu içine alaq. İndi layout belə görünəcək:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">məhsul əlavə et</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Adsız</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>burada heç bir məhsul yoxdur ...</i>
			</p>
			)}
		</div>

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

Əgər biz indi developer panelinin 'Şəbəkə' vərəqinə getsək, sonra da düyməmizə bassaq, sərvərə səhv bir sorğu göndərildiyini görəcəyik. React Router ilə biz yenə client tərəfində marşrutlaşdırmadan istifadə edəcəyik, serverə sorğunu aradan qaldıraraq.

Gəlin bunun üçün form teq-ini React Router-un Form komponenti ilə əvəz edək. Əvvəlcə Form importunu əlavə edək:

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

İndi kod parçasındaki form teq-lərini əvəz edək:

<Form method="post">
	<button type="submit">məhsul əlavə et</button>
</Form>

Proqramımızı yenidən yükləyin ve yenidən developer panelinə baxın. Məhsul əlavə etmə düyməsinə basalım - indi artıq serverə sorğu yoxdur (heyə halda xətaya diqqət yetirməyin).

Kecmiş derslərin tapşırıqlarında yaratdığınız proqramı götürün. Dərs materiallarından istifadə edərək, Root funksiyasının quruluşunu düzəldin, form teq-i içində telebe əlavə etmək üçün düymə əlavə edin. Əmin olun ki, düymə basıldıqda serverə sorğu gedir.

İndi isə form teq-ini, Form komponenti ilə əvəz edin. Əmin olun ki, telebe əlavə etmə düyməsinə basdıqda serverə heç bir sorğu göndərilmir.