React Router Basics: أساسيات التوجيه في React

في الدرس السابق تعرّفنا على React Router بشكل عام. الآن سنغوص في الأساسيات التي تحتاجها يوميًا: Routes و Links والتنقل البرمجي.

إعداد Routes بشكل صحيح

import { BrowserRouter, 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>
  );
}

كل Route يربط بين مسار ومكوّن. إذا زار المستخدم /contact، يظهر مكوّن Contact.

لاحظ أننا نضع كل المسارات داخل Routes، وهذا يمنع عرض أكثر من صفحة في نفس الوقت.

الفكرة هنا: React Router يقرأ العنوان الحالي في المتصفح، ثم يطابقه مع المسارات. أول مسار مطابق يتم عرضه. لذلك كلما أضفت صفحة جديدة، فقط أضف Route جديد بالمسار المناسب.

Link مقابل NavLink

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

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

NavLink يضيف class تلقائي عندما يكون الرابط نشطًا. هذا يساعدك على تمييز الصفحة الحالية في الـ Navbar.

عمليًا، عندما تكون في صفحة /about، سيضيف NavLink كلاس active للرابط. يمكنك استغلال ذلك لتغيير اللون أو الخط وإظهار الصفحة الحالية بوضوح.

التنقل البرمجي باستخدام useNavigate

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

function Login() {
  const navigate = useNavigate();

  function handleLogin() {
    // منطق تسجيل الدخول هنا
    navigate("/dashboard");
  }

  return <button onClick={handleLogin}>تسجيل الدخول</button>;
}

بعد نجاح تسجيل الدخول، نستخدم navigate لتوجيه المستخدم إلى صفحة /dashboard بشكل برمجي.

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

إنشاء صفحة 404 (Not Found)

function NotFound() {
  return <h2>الصفحة غير موجودة</h2>;
}

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

المسار * يعني "أي مسار غير معروف". لذلك نعرض مكوّن NotFound عندما يكتب المستخدم رابطًا خاطئًا.

بدون هذا المسار، قد يرى المستخدم صفحة فارغة أو خطأ غير واضح. صفحة 404 تجعل التجربة أوضح وتوجّه المستخدم للعودة للمسارات الصحيحة.

أخطاء شائعة

• نسيان وضع المسارات داخل Routes.
• استخدام a بدل Link مما يسبب إعادة تحميل.
• نسيان مسار 404 مما يجعل المستخدم يرى صفحة فارغة.

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

ما الفرق بين Link و NavLink؟

NavLink يضيف حالة active تلقائيًا للرابط الحالي.

ما هو useNavigate؟

هو Hook للتنقل البرمجي داخل التطبيق بعد تنفيذ منطق معين.

هل يمكن إنشاء صفحة 404 في React Router؟

نعم، باستخدام path="*" لعرض مكوّن NotFound.

ما معنى element في Route؟

هو المكوّن الذي يتم عرضه عند زيارة المسار.

هل يمكن استخدام Routes متعددة؟

نعم، يمكن تقسيم المسارات حسب الأقسام أو الـ Layouts.