React Router'da Veri Ekleme

Önceki derslerde bir yükleyici hazırladık ve belirli bir rota için verileri depodan dışa aktardık. Şimdi uygulamamız örneğinde yeni bir ürün nasıl eklenir ve verileri depoya nasıl yazılır öğrenelim.

root.jsx dosyasını açalım ve nav önüne yeni ürün eklemek için bir buton ekleyelim, onu bir form etiketine saralım. Ayrıca şimdi butonu ve listemizi #menu ile başka bir div'e saralım. Şimdi düzen şöyle görünecek:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">ürün ekle</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>İsimsiz</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>burada ürün yok ...</i>
			</p>
			)}
		</div>

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

Eğer şimdi geliştirici panelinin 'Ağ' sekmesine gider ve ardından butonumuza basarsak, sunucuya hatalı bir belge isteği göreceğiz. React Router ile, sunucuya istek yapılmadan istemci tarafında yönlendirme yapacağız.

Bunun için form etiketini React Router'ın Form bileşeni ile değiştirelim. Önce Form import'unu ekleyelim:

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

Şimdi kod parçasındaki form etiketlerini değiştirelim:

<Form method="post">
	<button type="submit">ürün ekle</button>
</Form>

Uygulamamızı yeniden yükleyin ve geliştirici panelini tekrar kontrol edin. Ürün ekleme butonuna basalım - artık sunucuya istek yok (şimdilik hatayı dikkate almayın).

Önceki derslerdeki görevlerde oluşturduğunuz uygulamayı alın. Ders materyallerinden yararlanarak, Root fonksiyonunun işaretlemesini düzeltin, form etiketi içine öğrenci eklemek için bir buton ekleyin. Butona basıldığında sunucuya istek yapıldığından emin olun.

Şimdi form etiketini, Form bileşeni ile değiştirin. Öğrenci ekleme butonuna basıldığında sunucuya istek gönderilmediğinden emin olun.