علي العبدالله نشر 7 يونيو 2023 أرسل تقرير نشر 7 يونيو 2023 السلام عليكم لدي موقع قمت بتصميمه بواسطة React وعند الانتقال من صفحة الى صفحة اخرى يصبح الScrollY في منتصف الصفحة وليس في بداية الصفحة ما السبب في ذلك ؟ React router link 2 اقتباس
1 عبدالباسط ابراهيم نشر 8 يونيو 2023 أرسل تقرير نشر 8 يونيو 2023 إذا كنت تستخدم 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 اقتباس
1 عمر قره محمد نشر 7 يونيو 2023 أرسل تقرير نشر 7 يونيو 2023 يمكنك حل المشكلة بإضافة 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 اقتباس
1 Mustafa Suleiman نشر 7 يونيو 2023 أرسل تقرير نشر 7 يونيو 2023 قد يكون السبب هو عدم إعادة تعيين قيمة ScrollY عند تحميل الصفحة الجديدة، بمعنى عندما تقوم بالتنقل بين الصفحات في تطبيق React باستخدام React Router، يتم عرض المحتوى الجديد في نفس المكان الذي كانت فيه الصفحة السابقة، ومن المحتمل أن ScrollY يتم الاحتفاظ به من الصفحة السابقة، مما يجعل الصفحة الجديدة تبدأ في وضعية غير متوقعة. لذلك قم بإعادة تعيين قيمة ScrollY إلى الصفر عند تحميل الصفحة الجديدة باستخدام useEffect() مع مصفوفة الاعتماد الفارغة [] لضمان أن يتم تشغيلها فقط عند تحميل الصفحة للمرة الأولى. import { useEffect } from 'react'; function YourComponent() { useEffect(() => { window.scrollTo(0, 0); }, []); // ... } 1 اقتباس
السؤال
علي العبدالله
السلام عليكم
لدي موقع قمت بتصميمه بواسطة React
وعند الانتقال من صفحة الى صفحة اخرى يصبح الScrollY في منتصف الصفحة وليس في بداية الصفحة
ما السبب في ذلك ؟
React router link
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.