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

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

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

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

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

const 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:

import { Link } from 'react-router-dom'

และเพิ่มสไตล์สำหรับคลาส link-btn และ product-excerpt ใน 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 ของเราและแทนที่บรรทัดโค้ดนี้:

<a>Products</a>

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

<NavLink to="/products" end>
	Products
</NavLink>

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

import { Outlet, NavLink } from 'react-router-dom'

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

เปิดแอปพลิเคชันเกี่ยวกับนักเรียนของคุณ ในไฟล์ App.jsx สร้างเส้นทางย่อยอีกหนึ่งเส้นทางสำหรับหน้านักเรียน

ในไฟล์ StudentsList.jsx ปรับเปลี่ยนโค้ดสำหรับ dispStudents ตามที่แสดงในบทเรียน

ทำให้ลิงก์ 'Students' ในเมนูด้านซ้ายนำไปสู่หน้ารายชื่อนักเรียน ตรวจสอบว่าทุกอย่างทำงานได้

ดูว่าค่าในแถบที่อยู่ของเบราว์เซอร์จะเปลี่ยนแปลงอย่างไร ขึ้นอยู่กับว่าคุณอยู่บนหน้าใดในขณะนี้