تم حلها: رد فعل خيوط التوجيه

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

 add react-router-dom

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

<Router> 
    <div> 
        <ul> 
            <li><Link to="/">Home</Link></li> 
            <li><Link to="/about">About</Link></li> 
            <li><Link to="/topics">Topics</Link></li> 
        </ul>

        <hr />

        <Route exact path="/" component={Home} /> 
        <Route path="/about" component={About} /> 
        <Route path="/topics" component={Topics} />  

    </div>  
</Router>

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

2. يلف هذا السطر التطبيق بأكمله في مكون جهاز التوجيه لتوفير وظيفة التوجيه:

3. يحتوي عنصر div هذا على قائمة بالروابط التي سيتم استخدامها للتنقل بين المسارات المختلفة:

ما هو جهاز التوجيه React

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

ما هو الغزل

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