Aprenda a Restaurar a Rolagem da Página no React Router

Como Restaurar a Rolagem da Página ao Voltar para uma Rota Anterior no React Router

Quando trabalhamos com aplicações de uma única página usando o React Router, é comum que a navegação entre diferentes rotas não mantenha a posição da rolagem da página. Isso pode ser frustrante para os usuários, especialmente se eles estavam no meio de uma leitura ou visualizando um conteúdo específico. Neste tutorial, vamos explorar como podemos restaurar a rolagem da página ao voltarmos para uma rota anterior.

Entendendo o Problema

Quando você navega entre diferentes páginas em uma aplicação React, o browser não recarrega a página, mas simplesmente muda a URL e renderiza o novo componente correspondente àquela rota. Isso significa que, por padrão, a posição de rolagem não é mantida. Para resolver este problema, podemos usar o hook useEffect juntamente com a API window.scrollTo().

Usando useEffect para Restaurar a Rolagem

Um dos métodos mais simples para restaurar a rolagem é utilizando o useEffect. Este hook nos permite executar efeitos colaterais em componentes funcionais. Aqui está um exemplo básico:

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

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

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

    return null;
};

Neste código, estamos usando o useLocation do React Router para obter o pathname atual da URL. Sempre que a pathname mudar, o useEffect será acionado e a função window.scrollTo(0, 0) irá restaurar a rolagem ao topo da página.

Mantendo a Posição da Rolagem

Se você deseja restaurar a posição da rolagem em vez de voltar ao topo, precisaremos armazenar a posição da rolagem antes de mudar de rota. Podemos usar o sessionStorage para isso. Veja como:

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

const ScrollRestoration = () => {
    const { pathname } = useLocation();

    useEffect(() => {
        const scrollPosition = sessionStorage.getItem(pathname);
        if (scrollPosition) {
            window.scrollTo(0, parseInt(scrollPosition, 10));
        }

        const handleScroll = () => {
            sessionStorage.setItem(pathname, window.scrollY);
        };

        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, [pathname]);

    return null;
};

Neste exemplo, estamos armazenando a posição vertical da rolagem no sessionStorage sempre que a rolagem da página muda. Quando o usuário retorna a uma rota, verificamos se existe uma posição armazenada e restauramos a rolagem para essa posição.

Considerações Finais

Restaurar a rolagem da página ao navegar entre rotas no React Router melhora a experiência do usuário, especialmente em aplicações com muito conteúdo. Usando o useEffect e o sessionStorage, conseguimos criar uma solução eficiente para este problema comum.

Exemplos Adicionais

Você pode expandir este conceito para incluir animações de rolagem ou até mesmo aplicar um comportamento de rolagem suave. Com isso, você aprimora ainda mais a experiência do usuário em sua aplicação React.

Para concluir, a manutenção da posição da rolagem é um aspecto importante a se considerar no desenvolvimento de aplicações React, e as técnicas apresentadas neste tutorial podem ser facilmente adaptadas para atender a necessidades específicas. Experimente e veja como isso pode beneficiar sua aplicação!

A Importância da Navegação Fluida em Aplicações React

A navegação em aplicações web é uma parte vital da experiência do usuário. Quando utilizamos frameworks como o React, a gestão do estado da aplicação e a navegação entre diferentes páginas se tornam mais eficientes. No entanto, muitos desenvolvedores enfrentam o desafio de manter a posição de rolagem ao voltar para rotas anteriores. Este conceito é essencial para garantir uma navegação fluida e intuitiva, permitindo que os usuários continuem de onde pararam, sem precisar rolar manualmente a página novamente. Portanto, entender como implementar essa funcionalidade não apenas melhora a experiência do usuário, mas também demonstra um cuidado com o design e a usabilidade da aplicação.

Algumas aplicações:

• Melhora a experiência do usuário em aplicações web.
• Facilita a navegação em conteúdos longos.
• Otimiza a usabilidade de aplicativos de uma única página.

Dicas para quem está começando

• Teste a funcionalidade em diferentes navegadores.
• Use o sessionStorage para armazenar estados temporários.
• Verifique se a rolagem é restaurada corretamente em todos os componentes necessários.

Compartilhe este tutorial