แก้ไขแล้ว: เราเตอร์ตอบโต้ activeClassName

ปัญหาหลักที่เกี่ยวข้องกับ activeClassName ใน React Router คือไม่อัปเดตคลาสที่ใช้งานโดยอัตโนมัติเมื่อเส้นทางเปลี่ยน ซึ่งหมายความว่านักพัฒนาซอฟต์แวร์ต้องอัปเดตคลาสที่ใช้งานด้วยตนเองทุกครั้งที่เส้นทางเปลี่ยน ซึ่งอาจใช้เวลานานและเกิดข้อผิดพลาดได้ง่าย นอกจากนี้ หากเส้นทางหลายเส้นทางซ้อนอยู่ภายในกัน อาจกลายเป็นเรื่องยากที่จะติดตามว่าเส้นทางใดที่ใช้งานอยู่ในปัจจุบัน และควรใช้คลาสใดกับแต่ละองค์ประกอบ

<Router>
  <Link to="/about" activeClassName="active">About</Link>
</Router>

ในปี 1 คอมโพเนนต์ใช้เพื่อสร้างเราเตอร์ใน React ซึ่งอนุญาตให้ผู้ใช้นำทางระหว่างหน้าต่างๆ

ในปี 2 ใช้คอมโพเนนต์เพื่อสร้างลิงก์ที่เมื่อคลิกแล้ว จะนำผู้ใช้ไปยังหน้าที่ระบุในแอตทริบิวต์ "ถึง" (ในกรณีนี้คือ "/เกี่ยวกับ")

3. แอตทริบิวต์ activeClassName ระบุว่าควรใช้คลาสใดเมื่อลิงก์เปิดใช้งาน (ในกรณีนี้คือ "ใช้งาน")

NavLink คืออะไร

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

แอตทริบิวต์ activeClassName

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

ทำไม activeClassName ถึงไม่ทำงาน

ActiveClassName เป็นคุณสมบัติของ React Router ที่ให้คุณเพิ่มคลาสให้กับลิงค์ที่ใช้งานอยู่ในเมนูการนำทาง น่าเสียดายที่มันใช้งานไม่ได้ใน React Router เพราะมันอาศัย API ประวัติของเบราว์เซอร์ ซึ่งไม่มีใน React Router ซึ่งหมายความว่า React Router ไม่สามารถตรวจพบเมื่อผู้ใช้คลิกลิงก์และใช้ activeClassName ตามนั้น