React Router: التنقل بين الصفحات خطوة بخطوة

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

الفكرة ببساطة: تغيّر الرابط ويتغيّر المكوّن المعروض، بدون إعادة تحميل الصفحة. النتيجة؟ تجربة أسرع وشعور احترافي للمستخدم.

لماذا نحتاج React Router؟

• تنقّل سريع بدون إعادة تحميل الصفحة.
• ربط كل رابط بمكوّن محدد بشكل واضح.
• تحكم كامل في بنية الصفحات داخل التطبيق.

التعريف البسيط: React Router = طريقة لعرض مكوّنات مختلفة حسب الـ URL.

الفكرة الأساسية: 3 قطع لا غنى عنها

1. BrowserRouter: يلفّ التطبيق ويُفعّل التوجيه.
2. Routes + Route: تربط المسارات بالمكوّنات.
3. Link: للتنقّل بدون إعادة تحميل الصفحة.

الخطوة 1: تثبيت React Router

npm install react-router-dom

بعد التثبيت يمكنك استخدام مكوّنات مثل BrowserRouter و Route.

الخطوة 2: إعداد المسارات (Routes)

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

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

هنا عرّفنا مسارين: الصفحة الرئيسية و صفحة عن التطبيق. عند زيارة كل رابط، React Router يعرض المكوّن المناسب.

شرح سريع:

• BrowserRouter يفعّل نظام التوجيه داخل التطبيق.
• Routes يجمع كل المسارات.
• Route يربط بين path و element.

الخطوة 3: إنشاء روابط التنقل

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

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

نستخدم Link بدل a حتى لا يتم إعادة تحميل الصفحة. هذا يعطي تنقّل سريع وسلس ويحافظ على حالة التطبيق.

مثال عملي صغير

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

function Home() {
  return <h1>الرئيسية</h1>;
}

function About() {
  return <h1>عن التطبيق</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">الرئيسية</Link>
        <Link to="/about">عن التطبيق</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

متى أستخدم BrowserRouter أو HashRouter؟

• BrowserRouter: روابط نظيفة مثل /about (يحتاج إعدادات سيرفر).
• HashRouter: روابط تحتوي # مثل /#/about (يعمل بدون إعدادات).

إذا كان مشروعك على استضافة بسيطة بدون إعدادات إعادة توجيه (مثل GitHub Pages)، استخدم HashRouter. أما إذا كنت تتحكم في السيرفر فاختر BrowserRouter لروابط أجمل.

أخطاء شائعة

• استخدام a بدل Link.
• نسيان وضع Routes داخل BrowserRouter.
• كتابة component بدل element في React Router v6.

أفضل الممارسات

• اجعل مساراتك واضحة ومقروءة.
• ابدأ بمسارات بسيطة ثم توسّع تدريجيًا.
• استخدم Link في كل التنقّل الداخلي.

الأسئلة الشائعة — FAQ

ما هو React Router؟

هو مكتبة للتنقل بين الصفحات في React بدون إعادة تحميل الصفحة.

لماذا لا نستخدم روابط HTML العادية؟

لأنها تعيد تحميل الصفحة بالكامل وتكسر تجربة SPA.

ما الفرق بين BrowserRouter و HashRouter؟

BrowserRouter يعطي روابط نظيفة، بينما HashRouter يستخدم # في الرابط.

كيف أضيف صفحة جديدة؟

أنشئ مكوّن جديد ثم أضف Route بمسار جديد.

ما هي Route؟

Route تربط بين مسار URL ومكوّن React.