การเพิ่มข้อมูลใน React Router

ในบทเรียนที่ผ่านมา เราได้เตรียมโหลดเดอร์ และการดึงข้อมูลตามเส้นทางที่กำหนด จากที่เก็บข้อมูล คราวนี้มาทำความรู้จัก ผ่านตัวอย่างแอปพลิเคชันของเราว่าจะเพิ่ม สินค้าใหม่และบันทึกข้อมูลของมันลงใน ที่เก็บข้อมูลได้อย่างไร

มาเปิดไฟล์ root.jsx และเพิ่ม ปุ่มสำหรับเพิ่มสินค้าใหม่เข้าไปในเลย์เอาต์ ก่อน nav โดยครอบมันด้วยแท็กฟอร์ม นอกจากนี้ ให้เราครอบปุ่มและรายการของเราอีกทีด้วย div อีกอันที่มี #menu ตอนนี้เลย์เอาต์จะ มีลักษณะดังนี้:

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>
);

หากตอนนี้เราเข้าไปที่แถบ 'เครือข่าย' ใน Developer Tools จากนั้นกดที่ ปุ่มของเรา เราจะเห็นคำขอเอกสารที่ผิดพลาด ไปยังเซิร์ฟเวอร์ ด้วย React Router เราจะใช้การกำหนดเส้นทาง ฝั่งไคลเอ็นต์อีกครั้ง เพื่อยกเว้นการร้องขอไปยังเซิร์ฟเวอร์

มาเปลี่ยนแท็ก form เป็นคอมโพเนนต์ Form ของ React Router กัน เริ่มด้วยการเพิ่ม การนำเข้า Form:

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

ตอนนี้มาแทนที่แท็ก form ในส่วนของโค้ด:

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

โหลดแอปพลิเคชันของเราอีกครั้งและดูที่ Developer Tools อีกที คราวนี้ลองกดปุ่มเพิ่ม สินค้า - ตอนนี้ไม่มีคำขอไปยังเซิร์ฟเวอร์แล้ว (ยังไม่ต้องสนใจข้อผิดพลาดที่ปรากฏ)

นำแอปพลิเคชันที่คุณสร้างไว้ใน แบบฝึกหัดจากบทเรียนที่ผ่านมา ใช้ เนื้อหาจากบทเรียน แก้ไขการแสดงผล ของฟังก์ชัน Root เพิ่มปุ่มสำหรับ เพิ่มนักเรียนในแท็ก form และตรวจสอบให้แน่ใจว่าหากกด ปุ่ม จะมีคำขอไปยังเซิร์ฟเวอร์เกิดขึ้น

และตอนนี้ให้แทนที่แท็ก form ด้วย คอมโพเนนต์ Form ตรวจสอบให้แน่ใจว่า เมื่อกดปุ่มเพิ่มนักเรียน จะไม่มีการส่งคำขอไปยังเซิร์ฟเวอร์