تم حلها: تفاعل ارتباط جهاز التوجيه يعمل

المشكلة الرئيسية المتعلقة بـ React Router Link هي أنه لا يقوم بتحديث سجل المتصفح بشكل صحيح عند النقر فوقه. هذا يعني أنه إذا نقر المستخدم على رابط ثم ضغط على زر الرجوع ، فسيتم إعادته إلى الصفحة السابقة بدلاً من الصفحة التي انتقل منها بعيدًا. بالإضافة إلى ذلك ، يمكن أن يتسبب هذا في سلوك غير متوقع في بعض الحالات ، مثل عند استخدام سلاسل الاستعلام أو أجزاء التجزئة.

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

<Router>
  <div>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
</Router>

1. استيراد {BrowserRouter as Router، Route، Link} من "React-router-dom" ؛
// يستورد هذا الخط مكونات BrowserRouter و Route و Link من مكتبة React-router-dom.

2.
// يُنشئ هذا السطر مكون جهاز توجيه والذي سيتم استخدامه لإنشاء مسارات لتطبيقنا.

3.

// يؤدي هذا إلى إغلاق عنصر div الذي يحتوي على جميع المسارات والروابط الخاصة بنا

رابط v6

يعد Link v6 مكونًا جديدًا في React Router يوفر حل تنقل تصريحيًا يمكن الوصول إليه لتطبيقات React. يحل محل مكون الارتباط السابق ويوفر المزيد من الميزات ودعمًا أفضل لإمكانية الوصول. يدعم Link v6 كلاً من الارتباطات العادية بالإضافة إلى التوجيه الديناميكي ، مما يسمح للمطورين بإنشاء تجارب تنقل قوية دون الحاجة إلى إدارة المسارات يدويًا أو استخدام مكتبات الجهات الخارجية. كما أنه يدعم العرض من جانب الخادم ، والذي يسمح للمطورين بإنشاء تطبيقات صديقة لكبار المسئولين الاقتصاديين بأقل جهد. أخيرًا ، يحتوي Link v6 على دعم مدمج لتتبع التحليلات ، مما يسهل تتبع تفاعلات المستخدم مع تطبيقك.

لماذا لا يعمل React Router Link

هناك عدة أسباب محتملة لعدم عمل React Router Link في React Router. السبب الأكثر شيوعًا هو أن المكون المرتبط به لم يتم تكوينه أو إعداده بشكل صحيح. على سبيل المثال ، إذا لم يتم استيراد المكون المرتبط به بشكل صحيح ، أو إذا كان مسار المسار غير صحيح ، فلن يعمل React Router Link. بالإضافة إلى ذلك ، إذا كان هناك أي أخطاء إملائية في مسار المسار أو اسم المكون ، فقد يتسبب ذلك أيضًا في حدوث مشكلات في React Router Link. أخيرًا ، إذا كان هناك أي تعارض بين مسارات متعددة (مثل مسارين لهما نفس المسار بالضبط) ، فقد يتسبب ذلك أيضًا في حدوث مشكلات في React Router Link.