ProtectedRoute حُرّاس المسارات

آخر تحديث: 2026-11-03

ProtectedRoute حُرّاس المسارات

حارس المسار يفحص الصلاحيات قبل فتح الصفحة: لفّ المسار بـ ProtectedRoute، فإذا لم يكن الزائر مسجّلًا وجّهه إلى /login مع تذكّر الصفحة التي أتى منها، ليعود إليها بعد الدخول. لا يشحن React حارسًا مدمجًا، فتُبنيه من الرسم الشرطي مع Navigate أو useNavigate، ويبقى الحارس مكوّنًا عاديًا يمكن اختباره بمفرده.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

import { Navigate, Outlet } from 'react-router-dom'

function ProtectedRoute({ isAuth }) {
  if (!isAuth) {
    // Not signed in: redirect to the login page and remember where we came from
    return <Navigate to="/login" replace state={{ from: location.pathname }} />
  }
  return <Outlet />   // Signed in: render the child routes
}

// Usage:
// <Route element={<ProtectedRoute isAuth={user} />}>
//   <Route path="/admin" element={<Admin />} />
// </Route>

⚙️ المعاملات

القيمة المرجعة：لا قيمة مرجعة؛ إنها نمط برمجي وليست واجهة قابلة للاستدعاء.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

النقر على «لوحة الإدارة» دون دخول يُحجب ويُرسَل إلى صفحة الدخول؛ والنقر على «سجّل الدخول وعد» يدخل اللوحة — سريان حارس إعادة توجيه Navigate مع العودة بعد الدخول (عرض توضيحي محاكى).

💡 النقاط الأساسية

🏷️ المزيد من التوجيه والحالة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

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

من نحن