استعادة التمرير ومسارات عدم العثور
استعد موضع التمرير عند الرجوع، واعرض صفحة 404 ودودة للمسارات غير المعروفة؛ وحافظ على سلاسة تجربة الاستخدام على الهاتف.
استعادة التمرير ومسارات عدم العثور درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا استعادة التمرير وصفحة 404؟
الهدف: الحفاظ على طبيعية التنقل.
- استعادة التمرير عند الرجوع
- صفحة 404 للمسارات غير المعروفة
- عرض توضيحي بسيط من دون مكتبات
المفاهيم في لمحة
- احفظ scrollTop لكل مسار قبل مغادرته
- عند التركيب، اقرأ الموضع السابق واستدعِ scrollTo
- التقط المسارات غير المطابقة واعرض شاشة واضحة تفيد بعدم العثور على الصفحة
عرض توضيحي: هيكل موجّه صغير
حالة موجّه صغيرة وثلاثة مسارات؛ سنضيف استعادة التمرير لاحقًا.
<div id="root"></div>عرض توضيحي: استعادة التمرير
احفظ scrollTop لكل مسار، واستعده عند التركيب التالي لتجربة رجوع طبيعية.
<div id="root"></div>عرض توضيحي: مسار عدم العثور على الصفحة
أضف شاشة NotFound للمسارات غير المعروفة، ووفّر زرًا للانتقال إلى الصفحة الرئيسية.
<div id="root"></div>نصائح ومزالق
- خزّن موضع التمرير لكل مفتاح مسار
- استعد الموضع عند التركيب قبل تنفيذ العمليات المكلفة
- أدرج دائمًا شاشة NotFound مع طريقة واضحة للعودة
التحقق من استعادة التمرير
الخلاصة
الخلاصة: خزّن scrollTop حسب المسار واستعده لجعل التنقل عند الرجوع يبدو طبيعيًا. أضف صفحة 404 ودودة ترشد المستخدمين إلى طريق العودة الآمن.
الأسئلة الشائعة
هل درس «استعادة التمرير ومسارات عدم العثور» مجاني؟
نعم — نص درس «استعادة التمرير ومسارات عدم العثور» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «استعادة التمرير ومسارات عدم العثور»؟
استعد موضع التمرير عند الرجوع، واعرض صفحة 404 ودودة للمسارات غير المعروفة؛ وحافظ على سلاسة تجربة الاستخدام على الهاتف. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.
كم من الوقت يستغرق درس «استعادة التمرير ومسارات عدم العثور»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- التخطيطات المتداخلة وأدوات التحميل (مفهوم) والتحميل المسبق
- مسارات المصادقة والمسارات المحمية
- استعادة التمرير ومسارات عدم العثور