دليل المبتدئين لاستخدام React Router لتصفح الصفحات في React

📍 دليل شامل لاستخدام React Router في تطبيقات React

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

🎯 ما هو React Router ولماذا نحتاجه؟

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

المميزات الرئيسية:

• إنشاء مسارات (Routes) مختلفة للتطبيق
• تنظيم التنقل بين المكونات
• تحسين تجربة المستخدم
• دعم للروابط المباشرة (Deep Linking)

📦 تثبيت React Router

لبدء الاستخدام، نحتاج أولاً إلى تثبيت المكتبة:

npm install react-router-dom

🔧 المكونات الأساسية في React Router

1. BrowserRouter

هو المكون الرئيسي الذي يغلف تطبيقنا ليسمح باستخدام Router

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* باقي التطبيق هنا */}
    </BrowserRouter>
  );
}

2. Routes و Route

يحددان المسارات والمكونات المرتبطة بها

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

3. Link

بديل عن <a> للتنقل الداخلي

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/">الرئيسية</Link>
      <Link to="/about">عننا</Link>
      <Link to="/contact">اتصل بنا</Link>
    </nav>
  );
}

🚀 مثال عملي متكامل

لنقم ببناء تطبيق بسيط بثلاث صفحات:

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

// مكونات الصفحات
function Home() {
  return <h1>الصفحة الرئيسية 🏠</h1>;
}

function About() {
  return <h1>صفحة عننا ℹ️</h1>;
}

function Contact() {
  return <h1>صفحة الاتصال 📞</h1>;
}

// مكون التنقل
function NavBar() {
  return (
    <nav style={{ padding: '20px', background: '#f0f0f0' }}>
      <Link to="/" style={{ margin: '10px' }}>الرئيسية</Link>
      <Link to="/about" style={{ margin: '10px' }}>عننا</Link>
      <Link to="/contact" style={{ margin: '10px' }}>اتصل بنا</Link>
    </nav>
  );
}

// التطبيق الرئيسي
function App() {
  return (
    <BrowserRouter>
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

💡 نصائح مهمة للمبتدئين

1. ترتيب المسارات: ضع المسارات الأكثر تحديداً في الأسفل
2. مسار افتراضي: يمكن استخدام path="*" للصفحات غير الموجودة
3. استخدم Link بدلاً من a: لتجنب إعادة تحميل الصفحة
4. اختبار كل مسار: تأكد من عمل كل مسار بشكل صحيح

<Route path="*" element={<NotFound />} />

❌ الأخطاء الشائعة

1. نسيان تغليف التطبيق بـ BrowserRouter
2. استخدام <a> بدلاً من <Link>
3. عدم تطابق مسارات Route مع مسارات Link
4. وضع مكونات خارج BrowserRouter