ما هي استراتيجيات إعادة ضبط الـ Scroll إلى أعلى الصفحة تلقائياً عند تغيير المسار (Scroll Restoration)؟

الإجابة المختصرة

يمكن استخدام مكون <ScrollRestoration /> المدمج في React Router Data APIs أو كتابة useEffect يستمع لتغير الـ pathname وينفذ window.scrollTo(0, 0).

الشرح

في تطبيقات الـ SPA، لا يعيد المتصفح ضبط موضع الـ Scroll تلقائياً عند تغيير المسار في بعض الحالات مما يترك المستخدم في منتصف الصفحة الجديدة. يوفر React Router مكون ScrollRestoration لمحاكاة سلوك المتصفح الطبيعي وحفظ مواضع الـ Scroll لكل صفحة في السجل بدقة.

مثال بالكود

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
  }, [pathname]);

  return null;
}

أخطاء شائعة

• استخدام behavior: "smooth" في التنقلات السريعة، مما يؤدي لحركات اهتزازية مربكة للمستخدم أثناء تحميل الصفحات.

أسئلة متابعة

• كيف يعمل الـ Data Loading والـ Loaders في الإصدارات الحديثة من React Router (v6.4+ Data APIs)؟

المصادر

• React Router docs — ScrollRestoration