ปัญหาหลักที่เกี่ยวข้องกับลิงก์ภายนอกของ React Router คืออาจทำให้เกิดพฤติกรรมที่ไม่คาดคิดเมื่อนำทางระหว่างหน้าต่างๆ ตัวอย่างเช่น หากผู้ใช้คลิกลิงก์ภายนอกในขณะที่อยู่ในหน้า React Router เบราว์เซอร์จะนำทางออกจากหน้าปัจจุบันแทนที่จะกำหนดเส้นทางไปยังหน้าใหม่ภายในแอปพลิเคชัน สิ่งนี้สามารถนำไปสู่ความสับสนและความยุ่งยากสำหรับผู้ใช้ที่คาดหวังว่าการเปลี่ยนหน้าระหว่างหน้าจะราบรื่น นอกจากนี้ ลิงก์ภายนอกอาจทำให้เกิดปัญหากับ SEO เนื่องจากเครื่องมือค้นหาอาจไม่สามารถจัดทำดัชนีเนื้อหาจากแหล่งภายนอกได้อย่างถูกต้อง
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. บรรทัดนี้นำเข้าส่วนประกอบ Link จากไลบรารี react-router-dom
2. บรรทัดนี้สร้างองค์ประกอบลิงก์ที่จะเปลี่ยนเส้นทางไปยัง “https://www.example.com” เมื่อคลิก และเปิดในแท็บใหม่โดยไม่มีข้อมูลผู้อ้างอิงที่ส่งไปยังหน้าใหม่ ข้อความของลิงก์จะเป็น "ลิงก์ภายนอก"
ลิงค์ภายนอกคืออะไร
ลิงก์ภายนอกใน React Router คือลิงก์ที่นำผู้ใช้ไปยังหน้านอกแอปพลิเคชัน นี่อาจเป็นเว็บไซต์ภายนอกหรือแอปพลิเคชันอื่น ลิงก์ภายนอกถูกใช้เพื่อให้ผู้ใช้ได้รับข้อมูลเพิ่มเติมหรือแหล่งข้อมูลที่เกี่ยวข้องกับเนื้อหาภายในแอปพลิเคชัน นอกจากนี้ยังสามารถใช้เป็นวิธีนำผู้ใช้ไปยังแอปพลิเคชันหรือเว็บไซต์อื่นเพื่อการสำรวจเพิ่มเติม
วิธีเพิ่มลิงค์ภายนอกด้วย React Router
การเพิ่มลิงค์ภายนอกด้วย React Router ใน React Router เป็นกระบวนการที่ไม่ซับซ้อน ก่อนอื่น คุณต้องนำเข้าส่วนประกอบลิงก์จากแพ็คเกจ react-router-dom จากนั้น คุณสามารถใช้คอมโพเนนต์ลิงก์เพื่อสร้างลิงก์ไปยัง URL ภายนอก ไวยากรณ์สำหรับสร้างลิงค์มีลักษณะดังนี้:
ตัวอย่างเช่น หากคุณต้องการสร้างลิงก์ไปยัง Google ก็จะมีลักษณะดังนี้:
เมื่อคุณสร้างลิงก์แล้ว คุณสามารถเพิ่มอุปกรณ์ประกอบฉากเพิ่มเติม เช่น คุณลักษณะเป้าหมายและ rel เพื่อการเข้าถึงที่ดีขึ้นและวัตถุประสงค์ด้านความปลอดภัย ตัวอย่างเช่น:
