BrowserRouter حاوية التوجيه BrowserRouter

آخر تحديث: 2026-11-03

BrowserRouter حاوية التوجيه BrowserRouter

BrowserRouter هي حاوية التوجيه في react-router-dom: تراقب العنوان وتوفّر الموقع الحالي لشجرة المكوّنات كاملة عبر Context. يجب أن تلفّ الطبقة الخارجية للتطبيق حتى تعمل Routes وRoute وLink وبقية واجهات التوجيه. عندها تصبح كل عملية تنقّل دفعةً في السجل بدل إعادة تحميل كاملة، وهو ما يجعل التطبيق ذا الصفحة الواحدة سريعًا للمستخدم.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

import { BrowserRouter, Routes, Route } from 'react-router-dom'

createRoot(document.getElementById('root')).render(
  <BrowserRouter>            {/* listens to the History API and provides the location context */}
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </BrowserRouter>
)

⚙️ المعاملات

القيمة المرجعة：لا شيء (إنه مكوّن). يرسم الأبناء ويبثّ الموقع الحالي ودوال التنقّل إلى الشجرة الفرعية بأكملها.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

النقر على زر التنقّل يبدّل الصفحة ويُحاط المسار الحالي بأقواس — تمامًا ما يفعله BrowserRouter داخليًا: يتغيّر المسار، يتحدّث السياق، ويُرسم الـ Route المطابق (عرض توضيحي محاكى).

💡 النقاط الأساسية

🏷️ المزيد من التوجيه والحالة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

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

من نحن