تم الحل: رد فعل جهاز التوجيه باستخدام أنماط ثابتة

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

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import styled from 'styled-components';
 
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;

  &:hover {
    color: white;
    text-decoration: none;  
  }  
`;

 const App = () => (   <Router>     <div>       <ul>         <li><StyledLink to="/">Home</StyledLink></li>         <li><StyledLink to="/about">About</StyledLink></li>       </ul>       <hr />       <Route exact path="/" component={Home} />       <Route path="/about" component={About} />     </div>   </Router>) ;

 const Home = () => (   <div>     <h2>Home</h2>   </div>) ;

 const About = () => (   <div>     <h2>About</h2>   </div>) ;

 export default App;

1. يستورد السطر الأول مكتبة React.
2. يستورد السطر الثاني مكونات BrowserRouter و Route و Link من مكتبة React-router-dom.
3. يستورد السطر الثالث المكون المصمم من مكتبة المكونات المصممة.
4. ينشئ السطر الرابع مكون StyledLink باستخدام مكون Link الذي تم استيراده من React-router-dom ويصممه باللون: palevioletred و font-weight: bold ، بالإضافة إلى تأثير التمرير الذي يغير لونه إلى اللون الأبيض ويزيل أي نص الزخرفة عندما تحوم فوقها.
5. يُنشئ السطر الخامس مكون التطبيق الذي يعرض مكون جهاز التوجيه بداخله مكونان من مكونات المسار (أحدهما للصفحة الرئيسية والآخر حول). يعرض أيضًا قائمة غير مرتبة من رابطين (الصفحة الرئيسية وحول) باستخدام مكون StyledLink الذي تم إنشاؤه في السطر 4 أعلاه كلاهما مفصول بعلامة hr لأغراض التصميم.
6. تُنشئ الأسطر 8 - 11 مكونين وظيفيين يسمى "الصفحة الرئيسية" و "حول" يعرضان علامات h2 بأسمائها الخاصة بداخلها عندما يتم استدعاؤها بواسطة مكونات المسار الخاصة بها في السطر 5 أعلاه كليهما (يتم عرض الصفحة الرئيسية "الصفحة الرئيسية" بينما يعرض "حول" "حول" ).
7. أخيرًا ، يقوم Line 12 بتصدير مكون التطبيق بحيث يمكن استخدامه في أي مكان آخر في تطبيقنا إذا لزم الأمر

الأنماط الثابتة

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

حزمة المكونات المصممة

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

كيفية استخدام الأنماط الثابتة

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

ثابت ماي ستايل = {
لون الخلفية: '# f2f2f2 ′ ،
fontSize: '20px'،
اللون: "# 000"
};