Thêm dữ liệu vào React Router

Ở các bài học trước, chúng ta đã chuẩn bị bộ nạp và việc xuất dữ liệu theo một tuyến đường nhất định từ kho lưu trữ. Bây giờ hãy cùng làm quen qua ví dụ về ứng dụng của chúng ta cách thêm một sản phẩm mới và ghi dữ liệu của nó vào kho lưu trữ.

Hãy mở tệp root.jsx và thêm vào bố cục một nút để thêm sản phẩm mới trước nav, bọc nó trong thẻ form. Đồng thời bây giờ chúng ta sẽ bọc cả nút và danh sách của chúng ta trong một div khác có #menu. Bố cục bây giờ sẽ trông như thế này:

return (
	<div id="main">
		<div id="menu">
			<form method="post">
				<button type="submit">thêm sản phẩm</button>
			</form>
			{products.length ? (
			<nav>
				{products.map((product) => (
				<Link key={product.id} to={`products/${product.id}`}>
					{product.name ? product.name : <i>Không tên</i>}
				</Link>
				))}
			</nav>
			) : (
			<p>
				<i>không có sản phẩm nào ở đây...</i>
			</p>
			)}
		</div>

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

Nếu bây giờ chúng ta vào tab 'Network' của bảng điều khiển nhà phát triển, sau đó nhấn vào nút của chúng ta, chúng ta sẽ thấy một yêu cầu sai đến tài liệu trên máy chủ. Với React Router chúng ta sẽ một lần nữa sử dụng định tuyến phía máy khách, loại trừ yêu cầu đến máy chủ.

Hãy thay đổi thẻ form thành thành phần Form của React Router để làm điều này. Hãy thêm trước tiên việc nhập Form:

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

Bây giờ hãy thay thế các thẻ form trong đoạn mã:

<Form method="post">
	<button type="submit">thêm sản phẩm</button>
</Form>

Hãy tải lại ứng dụng của chúng ta và xem lại bảng điều khiển nhà phát triển. Hãy nhấn nút thêm sản phẩm - bây giờ không còn yêu cầu đến máy chủ nữa (đừng chú ý đến lỗi lúc này).

Hãy lấy ứng dụng được tạo bởi bạn trong các nhiệm vụ của các bài học trước. Sử dụng tài liệu của bài học, hãy sửa bố cục của hàm Root, thêm nút cho việc thêm sinh viên vào trong thẻ form. Hãy đảm bảo rằng khi nhấn nút sẽ có một yêu cầu đến máy chủ.

Và bây giờ hãy thay thế thẻ form, bằng thành phần Form. Hãy đảm bảo rằng khi nhấn vào nút thêm sinh viên thì yêu cầu không được gửi đến máy chủ.