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

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

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

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

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

routes/root.jsximport { NavLink } from 'react-router-dom';

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

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

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

routes/root.jsx<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 ของเรา:

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

a.loading {
  color: gray;
}

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