การเพิ่มเส้นทางอื่นใน React Router

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

เริ่มต้น ลองเปิดแอปพลิเคชันของเรา ที่เราสร้างไว้ในบทเรียนก่อนหน้าและ สร้างในโฟลเดอร์ routes ไฟล์ชื่อ product.jsx สร้างคอมโพเนนต์ Product ขึ้นมาในไฟล์นั้น:

function Product() {}

export default Product;

ตอนนี้สร้างออบเจ็กต์ product ภายใน Product ที่มีคุณสมบัติ name, cost และ amount ตอนนี้จะเป็นค่า ที่กำหนดตายตัวก่อน:

function Product() {
	const product = {
		name: 'Product',
		cost: 400,
		amount: 5,
	};
}

export default Product;

และบนหน้าสินค้าเราจะ แสดง ชื่อ, ราคา และปริมาณ ตามลำดับ:

return (
	<div>
		<h2>Product page</h2>
		<p>Name: {product.name}</p>
		<p>Cost: {product.cost}</p>
		<p>Amount: {product.amount}</p>
	</div>
);

อย่าลืมเพิ่มการนำเข้าคอมโพเนนต์ Product ในไฟล์ main.jsx:

import Product from './routes/product';

และสุดท้าย เพิ่มเส้นทางอีกหนึ่งเส้นทาง ในแอปพลิเคชันของเรา ทำทันที หลังเส้นทางหลัก กำหนดพาท เป็น 'products/:productId' และ กำหนดให้แสดงผลด้วย คอมโพเนนต์ Product:

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

และตอนนี้เริ่มต้นแอปพลิเคชัน คลิกที่ลิงก์และเราจะเข้าสู่ หน้าสินค้า (ตอนนี้หน้า นี้ยังเหมือนกันสำหรับทุกลิงก์) แทนที่จะเป็นหน้าข้อผิดพลาด

นำแอปพลิเคชันที่คุณสร้างไว้ใน แบบฝึกหัดของบทเรียนก่อนหน้า ใช้ความรู้ จากบทเรียน สร้างไฟล์ student.jsx ในลักษณะเดียวกัน ให้บนหน้าของนักศึกษาปรากฏ ชื่อ นามสกุล ปีที่เข้าศึกษาและ สาขาวิชา เพิ่มเส้นทางใหม่ สำหรับหน้านักศึกษาในไฟล์ main.jsx กำหนดค่า path เป็น 'students/:studentId' ตรวจสอบว่า เมื่อคลิกที่ลิงก์ คุณเข้าสู่ หน้านักศึกษาในตอนนี้