ตอบสนองเราเตอร์ v4 ประโยชน์ <NavLink> เทียบกับ <Link>

นอกเหนือจากความสามารถในการตั้งค่า "activeClassName" และ "activeStyle" บน NavLink แล้วมีเหตุผลใดบ้างที่จะใช้NavLinkผ่านลิงก์เมื่อสร้างลิงก์ไปยังเส้นทางอื่น ๆ บนองค์ประกอบที่ไม่ใช่การนำทาง (เช่นไม่ใช่การนำทางหลักในส่วนหัวหรือส่วนท้าย) บนไซต์ของคุณ ที่ไม่ต้องการสถานะ / คลาสที่ใช้งานอยู่?

เอกสารอย่างเป็นทางการเป็นที่ชัดเจน:

<NavLink>

เวอร์ชันพิเศษ<Link>ที่จะเพิ่มแอตทริบิวต์สไตล์ให้กับองค์ประกอบที่แสดงผลเมื่อตรงกับ URL ปัจจุบัน

ดังนั้นคำตอบคือไม่มี ไม่มีเหตุผลอื่นใดนอกจากเหตุผลดังกล่าว

เมื่อคุณต้องการใช้แอตทริบิวต์สไตล์หรือคลาสเมื่อใช้งานอยู่<Link>คุณสามารถใช้<NavLink>

ลองดูตัวอย่าง:

ลิงค์

<Link to="/">Home</Link>

NavLink

<NavLink to="/" activeClassName="active">Home</NavLink>

ลิงค์คอมโพเนนต์

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

ส่วนประกอบ NavLink:

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

อ้างอิง: https://www.javatpoint.com/react-router

เมื่อคุณใช้<Link>จะไม่มีคลาสที่ใช้งานอยู่ในองค์ประกอบที่เลือก
ในทางตรงกันข้ามกับ<NavLink>องค์ประกอบที่เลือกจะถูกเน้นเนื่องจากองค์ประกอบนี้ถูกเพิ่มคลาสที่ใช้งานอยู่
หวังว่าจะเป็นประโยชน์สำหรับคุณ