مشكلة في الانتقال بين الصفحات REACT

إذا كنت تستخدم React 16.8+، يمكن التعامل بسهولة مع التمرير إلى الأعلى في كل مرة يتم فيها التنقل باستخدام مكون يقوم بالتمرير إلى الأعلى على نافذة المتصفح.

فيما يلي مكون scrollToTop.js:

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

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

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

ثم يمكن عرض المكون في أعلى تطبيقك، ولكن أسفل المكون Router.

فيما يلي كيفية عرض المكون في ملف app.js:

import ScrollToTop from "./scrollToTop";

function App() {
  return (
    <Router>
      <ScrollToTop />
      <App />
    </Router>
  );
}

أو يمكن عرضه في ملف index.js:

import ScrollToTop from "./scrollToTop";

ReactDOM.render(
    <BrowserRouter>
        <ScrollToTop />
        <App />
    </BrowserRouter>
    document.getElementById("root")
);

بهذه الطريقة، سيتم تمرير الصفحة إلى الأعلى في كل مرة يتم فيها التنقل إلى صفحة جديدة.

يمكنك حل المشكلة بإضافة useEffect تقوم بتمرير الصفحة إلى الاعلى عند كل انتقال و هذا مثال على كيفية التمرير إلى أعلى الصفحة عند تغيير المسار باستخدام React Router والخطاف `useEffect`:

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

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    };
  }, []);

  return null;
}

export default withRouter(ScrollToTop);

يمكنك استخدام مكون `ScrollToTop` هذا عن طريق تضمينه داخل مكون `Router` الخاص بك على النحو التالي:

<Router>
  <Fragment>
    <ScrollToTop />
    <Switch>
      <Route path="/" exact component={Home} />
    </Switch>
  </Fragment>
</Router>

و هذا سيضمن أن تتمرر الصفحة إلى الأعلى كلما تغير المسار. 

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

لذلك قم بإعادة تعيين قيمة ScrollY إلى الصفر عند تحميل الصفحة الجديدة باستخدام useEffect() مع مصفوفة الاعتماد الفارغة [] لضمان أن يتم تشغيلها فقط عند تحميل الصفحة للمرة الأولى.

import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  // ...
}