Menambah Data dalam React Router

Dalam pelajaran lepas, kita telah menyediakan pemuat dan memuat keluar data untuk laluan tertentu dari storan. Sekarang mari kita berkenalan dengan contoh aplikasi kita cara menambah produk baharu dan menulis datanya ke dalam storan.

Buka fail root.jsx dan tambahkan tompok untuk menambah produk baharu sebelum nav, dengan membungkusnya dalam tag borang. Juga sekarang bungkuskan both tombol dan senarai kami dalam satu lagi div dengan #menu. Layout sekarang akan kelihatan seperti ini:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">tambah produk</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>tiada produk di sini ...</i>
			</p>
			)}
		</div>

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

Jika kita sekarang pergi ke tab 'Rangkaian' panel pembangun, dan kemudian tekan tompok kami, kita akan melihat permintaan ralat dokumen ke pelayan. Dengan menggunakan React Router, kita akan sekali lagi menggunakan penghalaan di sebelah pelanggan, tidak termasuk permintaan ke pelayan.

Mari kita ubah tag form kepada komponen Form React Router. Tambahkan untuk mulakan import Form:

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

Sekarang gantikan tag form dalam potongan kod:

<Form method="post">
	<button type="submit">tambah produk</button>
</Form>

Muat semula aplikasi kita dan lihat sekali lagi pada panel pembangun. Tekan tombol tambah produk - sekarang tiada permintaan ke pelayan (jangan pedulikan ralat buat masa ini).

Ambil aplikasi yang anda buat dalam tugasan untuk pelajaran lepas. Menggunakan bahan pelajaran, betulkan susun atur fungsi Root, tambah tombol untuk menambah pelajar dalam tag form. Pastikan apabila butang ditekan, permintaan dihantar ke pelayan.

Dan sekarang gantikan tag form, dengan komponen Form. Pastikan bahawa apabila menekan butang tambah pelajar tiada permintaan dihantar ke pelayan.