• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

146
Views
reaccionar enrutador desplácese hacia arriba al navegar a la página actual

Estoy usando el siguiente componente ScrollToTop para desplazarme hasta la parte superior de la página después de navegar a una nueva página con el enrutador de reacción (copiado de algún lugar aquí en SO). Esto funciona según lo previsto.

 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; }

<ScrollToTop /> se encuentra dentro de mi App.js justo debajo react-helmet y encima de mi componente <Header /> .

Sin embargo, cuando navego a la página actual (por ejemplo, abro el sitio web/acerca de, me desplazo hacia abajo y navego al sitio web/acerca de otra vez), me quedo en la posición actual sin volver a la parte superior. Supongo que este es el caso porque el componente no se vuelve a cargar.

Lo que esperaría/me gustaría que sucediera es que la página se desplaza hacia la parte superior en cada navegación, incluso cuando se navega a la página actual.

¿Cómo puedo conseguir esto?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Muy bien, después de mirar alrededor y jugar un poco más, me topé con esto aquí: stackoverflow: react-router desplácese hacia arriba en cada transición

Descarté esto al principio porque asumí que haría más o menos lo mismo que mi código. Chico, estaba equivocado. Este código hace exactamente lo que estaba buscando.

Solo una cosa: estaba recibiendo un error sobre una dependencia faltante:

React Hook useEffect tiene una dependencia faltante: 'historial'.

Agregar historial a las dependencias solucionó este problema. Aquí el código final, en su mayoría copiado de la publicación vinculada anteriormente:

 import { useEffect } from "react"; import { withRouter } from "react-router-dom"; function ScrollToTop({ history }) { useEffect(() => { const unlisten = history.listen(() => { window.scrollTo(0, 0); }); return () => { unlisten(); }; }, [history]); return null; } export default withRouter(ScrollToTop);
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error