Routing في React باستخدام React Router

الدرس الثامن عشر: Routing في React باستخدام React Router

في هذا الدرس، سنتعرف على React Router، وهي مكتبة أساسية للتنقل بين الصفحات في تطبيقات React ذات الصفحة الواحدة (Single Page Applications – SPA). سنتناول كيفية إعداد React Router في تطبيق React، واستخدام المكونات المختلفة مثل Route و Switch و Link للتنقل بين الصفحات، بالإضافة إلى كيفية التعامل مع dynamic routing.

1. ما هو React Router؟

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

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

2. كيفية إعداد الـ React Router في تطبيق React

إعداد React Router في تطبيق React

أولاً، يجب تثبيت مكتبة react-router-dom التي توفر المكونات الخاصة بـ React Router:

npm install react-router-dom

بعد تثبيت المكتبة، يمكننا استيراد المكونات اللازمة واستخدامها داخل تطبيقنا.

إعداد المكونات الأساسية:

1. BrowserRouter: هو مكون يقوم بربط التطبيق بـ history API لتمكين التصفح دون إعادة تحميل الصفحة.
2. Route: يحدد المسار الذي يجب أن يعرض المكون المناسب له.
3. Switch: يحدد أي Route يتم تفعيله أولاً، ويضمن أن يتم عرض مكون واحد فقط في وقت معين.
4. Link: يسمح بالتنقل بين المسارات.

مثال بسيط لإعداد React Router:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// مكونات بسيطة تمثل الصفحات
function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function Contact() {
  return <h2>Contact Page</h2>;
}

function App() {
  return (
    <Router>
      <div>
        {/* التنقل بين الصفحات */}
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        {/* تحديد المسارات */}
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

الشرح:

• BrowserRouter (المعروف أيضًا بـ Router) هو العنصر الجذري الذي يلف التطبيق لتمكين التصفح داخل التطبيق.
• Route يستخدم لتحديد المسار وcomponent الذي يجب عرضه عندما يكون المسار مطابقًا.
• Switch يضمن أن يتم عرض مكون واحد فقط عندما يتطابق المسار.
• Link هو المكون الذي يمكن استخدامه للتنقل بين الصفحات دون إعادة تحميل الصفحة.

3. استخدام Route, Switch, و Link للتنقل بين الصفحات

• Route: هو المكون المسؤول عن عرض مكون معين عندما يتطابق المسار مع URL.
• Switch: يسمح بوجود مجموعة من Routes لكن يعرض واحدًا فقط الذي يتطابق مع URL، وهذا يساعد في تجنب عرض أكثر من مكون في نفس الوقت.
• Link: هو المكون الذي يسمح لك بإنشاء روابط للتنقل بين المسارات في التطبيق. يُستخدم بدلاً من <a> التقليدية في HTML.

مثال:

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

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function Contact() {
  return <h2>Contact Page</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

export default App;

4. كيفية التعامل مع dynamic routing

في بعض الأحيان قد تحتاج إلى التعامل مع المسارات الديناميكية، حيث يتغير جزء من الـ URL بناءً على المعطيات مثل معرفات (IDs) أو أسماء المستخدمين.

مثال على dynamic routing:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// مكونات لعرض تفاصيل المستخدم
function UserProfile({ match }) {
  return <h2>User Profile for ID: {match.params.userId}</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/user/123">User 123</Link></li>
          <li><Link to="/user/456">User 456</Link></li>
        </ul>
      </nav>

      <Switch>
        <Route path="/user/:userId" component={UserProfile} />
      </Switch>
    </Router>
  );
}

export default App;

الشرح:

• /user/:userId هو مسار ديناميكي. userId هو معطى يمكن تغييره بناءً على المستخدم.
• يتم استخراج المعطى باستخدام match.params.userId داخل المكون UserProfile لعرض تفاصيل المستخدم بناءً على ID.

5. الختام

• React Router هو أداة قوية لتمكين التصفح بين الصفحات في تطبيقات React ذات الصفحة الواحدة (SPA).
• باستخدام Route و Switch و Link يمكنك إدارة التنقل بين الصفحات بسهولة.
• Dynamic routing يسمح لك بإنشاء مسارات مرنة تعتمد على المعطيات المدخلة في URL.

تطبيق React Router يمكن أن يكون أساسًا قويًا لإنشاء تطبيقات معقدة تحتوي على صفحات متعددة مع تفاعل ديناميكي مع البيانات.