หน้าแสดงสินค้าในเบราว์เซอร์ด้วย Redux

ในบทเรียนที่แล้วเราได้สร้างหน้าแยกต่างหากสำหรับสินค้า ตอนนี้เราต้องทำให้เมื่อกดปุ่มใดๆ หน้านั้นจะปรากฏในเบราว์เซอร์

เริ่มต้นด้วยการกำหนดที่อยู่ (URL) ที่มันจะแสดงผล เปิดไฟล์ App.jsx ซึ่งเราเขียนเส้นทาง (routes) ไว้ และเพิ่มใน children อีกหนึ่งเส้นทางย่อย (อย่าลืม import ProductPage.jsx) ระบุเส้นทางและคอมโพเนนต์ที่เราจะแสดง:

App.jsx{
  path: '/products/:productId',
  element: <ProductPage />,
},

ตอนนี้มาเปิด ProductsList.jsx ในโฟลเดอร์ products และปรับเปลี่ยนโค้ดสำหรับ dispProducts เล็กน้อย ตอนนี้เรามีหน้าแยกต่างหากพร้อมข้อมูลเต็มของแต่ละสินค้า ดังนั้นในรายการสินค้าเราจะแสดงเพียงชื่อสินค้าและข้อความคำบรรยายแบบย่อ นอกจากนี้เราจะเพิ่มลิงก์ในรูปแบบขององค์ประกอบนำทาง Link จากไลบรารีเราเตอร์ เมื่อกดที่ลิงก์นี้จะสามารถไปที่หน้าสินค้าได้ เพิ่มคลาส product-excerpt ให้กับ div ด้วยเพื่อแยกสินค้าแต่ละรายการออกจากกัน ตอนนี้โค้ดของเราสำหรับ dispProducts จะเป็นดังนี้:

products/ProductsList.jsxconst dispProducts = products.map((product) => (
  <div key={product.id} className="product-excerpt">
    <h3>{product.name}</h3>
    <p>{product.desc.substring(0, 100)}</p>
    <Link to={`/products/${product.id}`} className="link-btn">
      view
    </Link>
  </div>
))

นำเข้า Link:

products/ProductsList.jsximport { Link } from 'react-router-dom'

และเพิ่มสไตล์สำหรับคลาส link-btn และ product-excerpt ใน index.css:

index.css.product-excerpt {
  margin-top: 30px;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 10px;
}

.link-btn {
  border: 1.5px solid gray;
  border-radius: 10px;
  background-color: coral;
  color: black;
  padding: 1px 12px 1px 12px;
}

สุดท้าย เรามาทำให้ลิงก์ในเมนูด้านซ้ายซึ่งนำไปสู่หน้าด้วยรายการสินค้าทำงานได้ด้วย เพื่อให้เราสามารถเข้าถึงได้จากที่อื่น ในการนี้ให้เปิด root.jsx ของเราและแทนที่บรรทัดโค้ดนี้:

app/root.jsx<a>Products</a>

ด้วยบรรทัดต่อไปนี้:

app/root.jsx<NavLink to="/products" end>
  Products
</NavLink>

อย่าลืมนำเข้า NavLink จากไลบรารี React Router ด้วย:

app/root.jsximport { Outlet, NavLink } from 'react-router-dom'

มาลองรันแอปพลิเคชันของเรา ตอนนี้เราสามารถไปที่หน้าข้อมูลสินค้าใดๆ โดยการกดปุ่มดู ลองเพิ่มสินค้าใหม่แล้วดูข้อมูลของมันในหน้าแยกต่างหากโดยกดปุ่มดู นอกจากนี้ตอนนี้เพื่อกลับไปที่รายการสินค้าก็เพียงคลิกที่ 'Products' ในเมนูด้านซ้าย ขณะอยู่บนหน้าต่างๆ ลองดูว่า URL ในแถบที่อยู่ของเบราว์เซอร์เปลี่ยนแปลงอย่างไร