المشكلة الرئيسية المتعلقة بالروابط الخارجية لـ React Router هي أنها يمكن أن تسبب سلوكًا غير متوقع عند التنقل بين الصفحات المختلفة. على سبيل المثال ، إذا نقر المستخدم على رابط خارجي أثناء وجوده على صفحة React Router ، فسينتقل المتصفح بعيدًا عن الصفحة الحالية بدلاً من التوجيه إلى الصفحة الجديدة داخل التطبيق. يمكن أن يؤدي هذا إلى الارتباك والإحباط للمستخدمين الذين يتوقعون انتقالًا سلسًا بين الصفحات. بالإضافة إلى ذلك ، يمكن أن تتسبب الروابط الخارجية أيضًا في حدوث مشكلات مع مُحسّنات محرّكات البحث نظرًا لأن محركات البحث قد لا تكون قادرة على فهرسة المحتوى بشكل صحيح من مصادر خارجية.
import { Link } from "react-router-dom";
<Link to="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</Link>
1. يستورد هذا الخط مكون الارتباط من مكتبة response-router-dom.
2. ينشئ هذا السطر عنصر ارتباط سيعيد التوجيه إلى "https://www.example.com" عند النقر فوقه ، ويفتحه في علامة تبويب جديدة بدون إرسال معلومات مرجعية إلى الصفحة الجديدة. سيكون نص الرابط "رابط خارجي".
ما هو الرابط الخارجي
الارتباط الخارجي في React Router هو ارتباط يأخذ المستخدم إلى صفحة خارج التطبيق. قد يكون هذا موقع ويب خارجيًا أو تطبيقًا آخر. تُستخدم الروابط الخارجية لتزويد المستخدمين بمعلومات أو موارد إضافية تتعلق بالمحتوى داخل التطبيق. يمكن استخدامها أيضًا كطريقة لتوجيه المستخدمين إلى تطبيقات أو مواقع ويب أخرى لمزيد من الاستكشاف.
كيفية إضافة ارتباط خارجي مع React Router
تعد إضافة ارتباط خارجي مع React Router في React Router عملية مباشرة. أولاً ، تحتاج إلى استيراد مكون الارتباط من حزمة رد فعل جهاز التوجيه-dom. بعد ذلك ، يمكنك استخدام مكون الارتباط لإنشاء ارتباط بعنوان URL خارجي. يبدو بناء الجملة الخاص بإنشاء ارتباط كما يلي:
على سبيل المثال ، إذا أردت إنشاء رابط إلى Google ، فسيبدو كالتالي:
جوجل
بمجرد إنشاء الرابط الخاص بك ، يمكنك إضافة دعائم إضافية مثل سمات الهدف و rel لتحسين إمكانية الوصول وأغراض الأمان. علي سبيل المثال:
جوجل
