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

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

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

routes/product.jsxfunction Product() {}

export default Product;

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

routes/product.jsxfunction Product() {
  const product = {
    name: 'Product',
    cost: 400,
    amount: 5,
  };
}

export default Product;

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

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

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

main.jsximport Product from './routes/product';

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

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

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