الإقليم ١٠ — خارطة الجولة والحارس

يبني فوق: التركيب وchildren (١)، Context لبثّ قيمةٍ لأي عمق (٧)، asChild ولماذا الرابط الحقيقي مهم (٩). النطاق: كيف يصير رابط المتصفّح نفسه "حالة" مشتركة، وكيف تحمي مساراتٍ بشرط. يفتح: تفتيش ما قبل العرض (١١).

اللغز المستفزّ

function App() {
  const [page, setPage] = useState<"home" | "profile" | "settings">("home");

  return (
    <>
      <nav>
        <button onClick={() => setPage("home")}>الرئيسية</button>
        <button onClick={() => setPage("profile")}>الملف الشخصي</button>
        <button onClick={() => setPage("settings")}>الإعدادات</button>
      </nav>
      {page === "home" && <HomePage />}
      {page === "profile" && <ProfilePage />}
      {page === "settings" && <SettingsPage />}
    </>
  );
}

ليش: لماذا لا نغيّر الرابط ببساطة عبر window.location.href؟

جرّب: window.location.href = "/profile". الرابط يتغيّر فعلاً! لكن راقب الشبكة والشاشة: الصفحة كلها تُعاد تحميلها من الصفر — طلبٌ جديدٌ كاملٌ للخادم، تحميل كل الأصول من جديد، ومضة بيضاء، وكل حالة React (كل ما بنيتَه في الأقاليم ٢-٧) تُمحى تماماً وتبدأ من جديد. هذا يهزم كل الغاية من بناء تطبيقٍ بصفحةٍ واحدة (SPA) أصلاً — رجعنا لعالم ما قبل الإقليم ٠: أعد بناء كل شيءٍ من الصفر لتغييرٍ واحد.

المطلوب دقيقٌ جداً: غيّر الرابط في شريط العنوان، بلا أن تطلب من المتصفّح تحميل صفحةٍ جديدة فعلياً.

كيف: History API — الرابط بلا إعادة تحميل

المتصفّح يعطيك بالضبط هذا: history.pushState(state, title, newUrl) يغيّر الرابط الظاهر في الشريط، بلا أي طلب شبكةٍ ولا إعادة تحميل. الثمن: هذا لا "يُعلن" عن نفسه تلقائياً — تطبيقك يحتاج مراقبة الرابط بنفسه:

function useHistoryRouter() {
  const [pathname, setPathname] = useState(window.location.pathname);

  useEffect(() => {
    function handlePopState() {
      setPathname(window.location.pathname);        // زرّ الرجوع/التقدّم يُطلق هذا الحدث
    }
    window.addEventListener("popstate", handlePopState);
    return () => window.removeEventListener("popstate", handlePopState);   // الإقليم ٣
  }, []);

  const navigate = (to: string) => {
    window.history.pushState({}, "", to);
    setPathname(to);                                  // ⚠️ ضروريٌّ — انظر التحذير أدناه
  };

  return { pathname, navigate };
}

تحذيرٌ دقيقٌ ومهم: pushState لا يُطلق حدث popstate بنفسه — الحدث يُطلَق فقط حين يضغط المستخدم زرّي الرجوع/التقدّم فعلياً في المتصفّح. لو نسيتَ setPathname(to) بعد pushState (بافتراض أن الحدث سيُطلَق تلقائياً "لأننا غيّرنا الرابط")، سترى الرابط يتغيّر في الشريط لكن المحتوى المعروض لا يتحرّك إطلاقاً — لأن لا شيء أخبر React أن pathname تغيّر. هذه بقّةٌ حقيقية وشائعة جداً لمن يبني موجّهاً بنفسه لأول مرة.

اللغز/البناء من الصفر — الجزء الأول

const RouterContext = createContext<{ pathname: string; navigate: (to: string) => void } | null>(null);

function Link({ to, children }: { to: string; children: Child }) {
  const ctx = useContext(RouterContext)!;             // بثٌّ من الإقليم ٧ — بلا تمرير يدوي
  return (
    <a
      href={to}                                        // حقيقيٌّ عمداً — انظر التعليق أدناه
      onClick={(e) => { e.preventDefault(); ctx.navigate(to); }}
    >
      {children}
    </a>
  );
}

كيف: من موجّهك اليدوي إلى مكتبةٍ حقيقية

react-router-dom يحلّ بالضبط نفس المشكلة، بآليةٍ مطابقة الجوهر (History API + Context لبثّ حالة التنقّل)، لكن أعمق بكثير: مطابقة أنماطٍ ديناميكية (/users/:id)، تحميل بياناتٍ مرتبط بالمسار، وتوجيهاتٌ متداخلة. أعد بناء نفس التطبيق:

import { createBrowserRouter, RouterProvider, Link, Outlet } from "react-router-dom";

const router = createBrowserRouter([
  {
    element: <MainLayout />,               // إطارٌ مشترك — التالي
    children: [
      { path: "/", element: <HomePage /> },
      { path: "/profile", element: <ProfilePage /> },
      { path: "/settings", element: <SettingsPage /> },
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

<Outlet/> — نفس مشكلة الإقليم ١، بثوبٍ جديد

لاحظ MainLayout كـelement أب، وثلاث صفحاتٍ كـchildren. بلا هذا، كانت كل صفحةٍ من الثلاث ستحتاج تكرار الـ<Navbar/>/<Footer/> بنفسها — نفس درس "شكلٌ متكرّر، استخرجه" من الإقليم ١ بالضبط. الحل هنا:

function MainLayout() {
  return (
    <div>
      <Navbar />
      <main><Outlet /></main>              {/* هنا تُدرَج الصفحة المطابقة للرابط الحالي */}
      <Footer />
    </div>
  );
}

<Outlet/> تصريحٌ يقول "أدرِج هنا أياً كان الابن الذي طابق الرابطَ الحالي". قارنها بـchildren من الإقليم ١: children تُملأ بما وضعه الأب في JSX مباشرة؛ Outlet تُملأ بما قرّره الموجّه بناءً على الرابط الحالي. نفس فكرة "فتحة تُملأ لاحقاً"، لكن مصدر الملء مختلف: تركيبٌ صريحٌ في الحالة الأولى، ومطابقة رابطٍ في الثانية.

ليش وكيف: الحارس — حماية مسارٍ بشرط

عندك مسارٌ يجب ألا يظهر إلا لمستخدمٍ مسجَّل دخوله. المسار نفسه لا يعرف ولا يجب أن يعرف شيئاً عن المصادقة — هذا مسؤوليةٌ منفصلة. الحل: طبقة "حارسٍ" تُغلِّف مجموعة مساراتٍ، تفحص شرطاً، وتقرّر: اسمح بالمرور (<Outlet/>)، أو حوّل لمكانٍ آخر:

function useAuthNano() {                              // محاكاةٌ بسيطة لهذا اللغز
  const [isAuthenticated] = useState(false);
  return { isAuthenticated };
}

function RequireAuth() {
  const { isAuthenticated } = useAuthNano();
  const location = useLocation();

  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return <Outlet />;                                   // اسمح بمرور المسار الفعلي
}

const router = createBrowserRouter([
  { element: <MainLayout />, children: [
    { path: "/", element: <HomePage /> },
    {
      element: <RequireAuth />,                        // طبقة حراسة كاملة
      children: [
        { path: "/profile", element: <ProfilePage /> },
        { path: "/settings", element: <SettingsPage /> },
      ],
    },
  ]},
]);

لاحظ التركيب: RequireAuth نفسه مسارٌ أبٌ آخر، له <Outlet/> خاصٌّ به — بالضبط كـMainLayout، لكن بدل عرض واجهةٍ ثابتة، يعرض شرطياً: إمّا الفتحة (المسار الحقيقي) أو تحويلاً. هذا تركيبٌ متداخل لنفس فكرة "المسار كطبقة" — طبقةٌ للإطار البصري (MainLayout)، وطبقةٌ للحراسة (RequireAuth)، كلٌّ مستقلٌّ عن الآخر تماماً.

اللغز/البناء من الصفر — الجزء الثاني

الخلاصة — أين تتّصل هذه العقدة بالشجرة

الوصلة بمشروعك