Menambahkan Data ke React Router

Pada pelajaran sebelumnya kita telah mempersiapkan loader dan pengambilan data berdasarkan rute tertentu dari penyimpanan. Sekarang mari kita berkenalan dengan contoh pada aplikasi kita tentang cara menambahkan produk baru dan menulis datanya ke dalam penyimpanan.

Mari buka file root.jsx dan tambahkan tombol untuk menambahkan produk baru ke dalam tata letak sebelum nav, dengan membungkusnya dalam tag form. Kita juga akan membungkus tombol dan daftar kita sekarang dalam div lain dengan #menu. Tata letaknya sekarang akan terlihat seperti ini:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">add product</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Unnamed</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>no products here ...</i>
			</p>
			)}
		</div>

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

Jika sekarang kita membuka tab 'Network' pada panel pengembang, lalu menekan tombol kita, kita akan melihat permintaan dokumen yang salah ke server. Dengan menggunakan React Router, kita akan kembali memanfaatkan perutean di sisi klien, menghilangkan permintaan ke server.

Mari ubah tag form menjadi komponen Form React Router untuk ini. Mari tambahkan impor Form terlebih dahulu:

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

Sekarang ganti tag form pada potongan kode:

<Form method="post">
	<button type="submit">add product</button>
</Form>

Muat ulang aplikasi kita dan lihat lagi pada panel pengembang. Mari tekan tombol penambahan produk - sekarang tidak ada lagi permintaan ke server (untuk sementara abaikan errornya).

Ambil aplikasi yang Anda buat di tugas pelajaran sebelumnya. Dengan menggunakan materi pelajaran, perbaiki markup fungsi Root, tambahkan tombol untuk menambahkan siswa dalam tag form. Pastikan bahwa ketika tombol ditekan, terjadi permintaan ke server.

Dan sekarang ganti tag form, dengan komponen Form. Pastikan bahwa saat menekan tombol penambahan siswa, tidak ada permintaan yang dikirim ke server.