اذهب إلى المحتوى

السؤال

Recommended Posts

  • 1
نشر

إذا كنت تستخدم 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")
);

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

  • 1
نشر

يمكنك حل المشكلة بإضافة 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>

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

  • 1
نشر

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

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

import { useEffect } from 'react';

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

  // ...
}

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...