Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Rolar a página para o topo, nas trocas de rotas.

OLá, estou usando o react router 4, e tentando fazer um projeto SPA para pegar as manhas do REACT, mas estou realmente travado em algo aqui! Gostaria que nas trocas de Rotas, a página rolasse para o topo!

meu arquivo App.js é onde chamo todos os outros componentes, e seto o Router. Existe alguma função do router ou do react que seja dispara ao trocar de rota, (testei colocando no app.js o window.scrollTo(0, 0) no componentWillReceiveProps() e no componentWillUpdate() mas não funcionou.

Também testei esta solução: https://reacttraining.com/react-router/web/guides/scroll-restoration que está na própria documentação do react-router-dom. Porém não consegui implementar. Acho que posso estar fazendo algo errado.

O que eu consegui fazer, que deu certo, é: nos meus componentes que são chamados pelo <Route path=/"">, eu coloquei o window.scrollTo(0, 0) no componentDidMount() e funcionou, mas no meu caso, o projeto tem "páginas" todos esses components ficou com esse código, isso seria meio feio, não?

Ou seria até o ideal, pois assim posso ter components que não são necessários rolar para o topo da página.

Obrigado!

4 respostas

Oi Aldo, parece que eles tiraram o comportamento padrão mesmo. O que deu errado quando você tentou implementar a solução sugerida pela documentação? Era para isso vir pronto, mas enfim...

Olá Alberto, estou criando um repo no github com um projeto teste, e vou tentar implementar da mesma forma que eu tinha tentado antes, e ir citando o q tentei fazer!

só uns minutinhos q respondo aqui de novo com o repo! :P Obrigado!

solução!

Oook, kkk

Montei o projeto em um github (https://github.com/aldo-jr/teste_react_scroll_up), coloquei tudo la, implementei a forma como eles indicam, e... funcionou kkkkk

Achei onde eu estava errando, o react-router-dom tem uma classe chamada withRouter, eu estava esquecendo de importar ela... hahaha erro bobo, desculpa! :P

Obs, Obrigado Alberto pelos cursos de React! Você consegue explicar muito bem! :)

Outro erro que eu estava cometendo era, na hora de importar a class ScrollToTop eu estava fazendo da seguinte maneira:

import ScrollToTop from 'ScrollToTop'; Porem, assim ele buscaria o ScrollToTop dentro do node_modules. e dava erro ao importar. o certo é: import ScrollToTop from './ScrollToTop';

Haha, pura falta de atenção! Desculpa haha.