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

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

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { createGlobalStyle } from 'styled-components';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
 
const GlobalStyle = createGlobalStyle` 
    body { 
        margin: 0; 

        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 
            "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 
            sans-serif;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;  

    }  

    code {  font-family: sourcecode pro, Menlo, Monaco, Consolas, Courier New, monospace; }  

    *{ boxsizing: borderbox;}  

    img{ maxwidth: 100%;}  

    a{ textdecoration : none;}     `; // Global styles for the entire app. This will be applied to all components. 
     const App = () => ( // The main component of the app. This is where all routes are defined.      <Router>       <div>         <GlobalStyle />          <Route exact path="/" component={HomePage} />          <Route path="/about" component={AboutPage} />       </div>     </Router> ); export default App;

1. استيراد رد فعل من "رد فعل" ؛ // استيراد مكتبة React
2. استيراد {BrowserRouter as Router، Route} من "React-router-dom" ؛ // استيراد مكونات BrowserRouter والمسار من مكتبة React-router-dom
3. استيراد {createGlobalStyle} من "مكوّنات نمطية" ؛ // استيراد وظيفة createGlobalStyle من مكتبة المكونات المصممة
4. استيراد الصفحة الرئيسية من "./pages/HomePage" ؛ // استيراد مكون الصفحة الرئيسية
5. استيراد AboutPage من "./pages/AboutPage" ؛ // استيراد مكون AboutPage
6. const GlobalStyle = createGlobalStyle`… `؛ // الأنماط العامة للتطبيق بأكمله. سيتم تطبيق هذا على جميع المكونات.
7. const التطبيق = () => (...) ؛ // المكون الرئيسي للتطبيق. هذا هو المكان الذي يتم فيه تحديد جميع الطرق.
8. ؛ // تحديد مسار بمسار دقيق لـ "/" يعرض مكون الصفحة الرئيسية
9. ؛ // تحديد مسار بمسار "/ about" الذي يعرض مكون AboutPage
10 تصدير التطبيق الافتراضي ؛ // تصدير التطبيق كإعداد افتراضي

استخدام الأنماط

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

استخدام المجلد العام

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

كيف يمكنني استيراد ملف CSS من مجلد عام في React

في React Router ، يمكنك استيراد ملف CSS من المجلد العام باستخدام مكون الارتباط. يتيح لك مكون الارتباط تحديد مسار للملف في سمة href. علي سبيل المثال:

سيؤدي هذا إلى استيراد ملف styles.css من مجلدك العام إلى تطبيق React Router الخاص بك.