انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: التنقل البرمجي وصفحة عدم العثور والمسارات المحمية

Wildcard 404 Not Found Route صفحة 404 بمسار النجمة الشامل

وجّه المستخدم برمجياً بعد إرسال النماذج بخطاف useNavigate وخيار replace، وأنشئ صفحة 404 وحارس المسارات المحمية ProtectedRoute مع تطبيق التحقق الأمني الإلزامي بالخادم.
3 صفوف تعليمية
ReactJS
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عندما يكتب الزائر عنواناً خاطئاً لا يطابق أي مسار معرّف، ستظهر شاشة فارغة ما لم تضف مسار التقاط شامل بنجمة (path="*") مثل <Route path="*" element={<NotFoundPage />} />. ولأن النجمة تمتلك أدنى درجة أولوية في خوارزمية المطابقة، فإنها لا تعمل إلا بعد فشل كافة المسارات الصريحة والديناميكية، فتعرض صفحة 404 واضحة مع رابط عودة للرئيسية.

الصف 2 كود برمجي
HTML 
<Routes>
  <Route path="/" element={<HomeView />} />
  <Route path="/courses" element={<CoursesView />} />
  <Route
    path="/old-tracks"
    element={<Navigate to="/courses" replace />}
  />
  <Route path="*" element={<NotFoundPage />} />
</Routes>
جرّب بنفسك
الصف 3 ملاحظة هامة

جميع فقرات هذا الدرس (التنقل البرمجي وصفحة عدم العثور والمسارات المحمية)