การเน้นลิงก์ที่ใช้งานอยู่ใน React Router

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

เริ่มแรกให้เข้าไปที่หน้าหลัก เพิ่ม 4 ผลิตภัณฑ์ ลงในรายการ และสำหรับแต่ละรายการให้ป้อนข้อมูล ตั้งชื่ออะไรก็ได้ให้พวกเขา

คอมโพเนนต์ NavLink จะช่วยเรา ในการเน้นลิงก์ที่ใช้งานอยู่ นี่คือประเภทย่อยของ คอมโพเนนต์ Link ที่รู้จัก สถานะของข้อมูล โดยปกติจะใช้ เมื่อสร้างเมนูนำทาง

มาเปิด root.jsx และนำเข้า NavLink (อย่าลืมลบการนำเข้า Link ออก มิฉะนั้น React อาจจะเตือน เพราะเราไม่ได้ใช้มันอีกต่อไป):

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

จากนั้นในเลย์เอาต์ ให้เปลี่ยนคอมโพเนนต์ Link เป็น NavLink:

<NavLink key={product.id} to={`products/${product.id}`}>
	{product.name ? product.name : <i>unnamed</i>}
</NavLink>

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

<NavLink
	key={product.id}
	to={`products/${product.id}`}
	className={({ isActive, isPending }) =>
		isActive ? 'active' : isPending ? 'loading' : ''
	}
>
	{product.name ? product.name : <i>Unnamed</i>}
</NavLink>

สิ่งที่เหลืออยู่คือเพิ่มสไตล์สำหรับ คลาส active และ loading ลงในไฟล์ css ของเรา:

a.active {
	font-weight: bold;
	color: brown;
}

a.loading {
	color: gray;
}

เสร็จแล้ว! ทีนี้ลองคลิกที่ผลิตภัณฑ์ ในรายการดู

นำแอปพลิเคชันที่คุณสร้างขึ้นใน แบบฝึกหัดของบทเรียนที่ผ่านๆ มา ใช้ความรู้ จากบทเรียนนี้ ดำเนินการ เน้นลิงก์ที่ใช้งานอยู่ในรายการ นักศึกษา เพื่อให้ผู้ใช้เข้าใจว่า กำลังดูข้อมูลของนักศึกษาคนไหนอยู่