הבעיה העיקרית הקשורה לקישורים חיצוניים של 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. לאחר מכן, תוכל להשתמש ברכיב קישור כדי ליצור קישור לכתובת אתר חיצונית. התחביר ליצירת קישור נראה כך:
לדוגמה, אם תרצה ליצור קישור לגוגל, זה ייראה כך:
לאחר שיצרת את הקישור שלך, תוכל להוסיף אביזרים נוספים כגון תכונות יעד ו-rel למטרות נגישות ואבטחה טובות יותר. לדוגמה:
