Scroll para o Topo em Transições de Página com React Router

Neste artigo você aprenderá a fazer um Scroll para o Topo em Transições de Página, utilizando a biblioteca React Router

Fala programador(a), beleza? Bora aprender mais sobre React JS e React Router!

A experiência do usuário é uma das principais preocupações ao desenvolver uma aplicação web.

Uma das pequenas, mas significativas, otimizações que você pode fazer para melhorar essa experiência é garantir que o usuário seja levado ao topo da página cada vez que ele navegar para uma nova rota.

No entanto, com bibliotecas de roteamento em SPA (Single Page Application) como o React Router, essa ação não é automática.

Neste artigo, aprenderemos como fazer scroll para o topo da página em toda transição com o React Router.

O Problema

Em aplicações tradicionais, a página inteira é recarregada quando você navega entre páginas, o que significa que você sempre começa do topo.

Contudo, em uma SPA com React Router, apenas os componentes que mudam entre as rotas são atualizados.

Se você estiver na metade de uma página e navegar para outra rota que também é longa, você começará a partir da metade dessa nova rota.

Solução Simples: Uso do useEffect

Uma solução simples e eficaz é usar o hook useEffect para escutar mudanças na rota e, assim, fazer scroll para o topo quando detectada uma alteração.

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

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

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

  return null;
}

export default ScrollToTop;

Neste componente, useLocation é um hook do react-router-dom que retorna o objeto de localização atual. Sempre que o caminho muda, nossa função de efeito colateral é acionada, deslocando o usuário para o topo da página.

Integre com o Roteador

Para que essa solução funcione, você precisa adicionar o componente ScrollToTop no topo da sua árvore de componentes, geralmente dentro do componente Router.

import { BrowserRouter as Router } from 'react-router-dom';
import ScrollToTop from './ScrollToTop';

function App() {
  return (
    <Router>
      <ScrollToTop />
      {/* Seus componentes Route vão aqui */}
    </Router>
  );
}

export default App;

Melhorando a Experiência com Animação

Fazer scroll abruptamente para o topo pode não ser a melhor experiência para todos os usuários. Uma abordagem mais suave seria animar o scroll.

Aqui está uma função que você pode usar em vez de window.scrollTo(0, 0):

function smoothScrollToTop() {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(smoothScrollToTop);
    window.scrollTo(0, c - c / 8);
  }
}

Precauções

Acessibilidade

Lembre-se de que ao fazer mudanças no comportamento padrão de navegação, você pode estar afetando a acessibilidade.

Alguns usuários podem não esperar que a página volte ao topo quando eles navegarem para uma nova página em uma SPA.

Desempenho

A animação suave do scroll é esteticamente agradável, mas também pode ser mais pesada.

Certifique-se de testar a função em dispositivos mais antigos ou mais lentos para garantir que a animação não cause solavancos ou lentidão.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Melhorar a experiência do usuário em sua aplicação React é essencial, e garantir uma transição suave entre rotas é apenas uma parte disso.

Com o React Router e os hooks fornecidos pelo React, é fácil implementar essa funcionalidade.

Com as técnicas mostradas neste artigo, você está pronto para oferecer uma navegação mais intuitiva e amigável em sua aplicação React.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.