React Router: Scroll To Top na mudança de rota
Tags: braziliandevs, javascript, react, beginners
Published: 2022-03-14 12:56:53

Se você estiver usando o React Router Dom para navegação e roteamento em seu aplicativo React, terá que lidar com a restauração de rolagem por conta própria porque a biblioteca não envia mais o gerenciamento de rolagem padrão (costumava fornecer uma solução pronta para uso em o passado).

Por padrão, se você tiver uma página de conteúdo longa e, em seguida, navegar para outra página de conteúdo longa, você permanecerá rolado para baixo. Esse comportamento não faz muito sentido porque muitas pessoas não gostam de ler o texto de cabeça para baixo. O exemplo abaixo mostrará como rolar automaticamente para o topo da página em cada mudança de rota. Usaremos os hooks **useEffect** e **useLocation** para fazer o trabalho.

> Atualizamos recentemente para funcionar com o React Router +6.x. No entanto, o trecho de código do React Router 5.x também está disponível.

### O Componente

1 - Crie um novo projeto React e instale react-router-dom:
```bash
$ npm install react-router-dom@6 --save
```
2 - Crie um componente wrapper que lide com a restauração de rolagem para você:
```TypeScript
// ScrollToTop.tsx
import { useEffect } from "react"
import { useLocation, RoutesProps } from "react-router-dom"

export default function ScrollToTop (props: RoutesProps) {
  const location = useLocation()
  useEffect(() => {
    window.scrollTo(0, 0)
  }, [location])

  return <>{props.children}</>
}
```
3 - Crie um arquivo chamado **LandingPage.tsx** em sua pasta src e adicione o seguinte:
```TypeScript
// LandingPage.tsx
import { Link } from "react-router-dom"

const LandingPage = () => {
  return (
    <div style={{ margin: "auto", width: "80%" }}>
      <h1>Landing Page</h1>
      <div style={{ backgroundColor: "pink", height: 700 }}></div>
      <div style={{ backgroundColor: "orange", height: 700 }}></div>
      <div style={{ backgroundColor: "purple", height: 700 }}></div>
      <Link to="/product">
        <h2>Go To Product Page</h2>
      </Link>
    </div>
  )
}

export default LandingPage
```
4 - Da mesma forma, crie um arquivo chamado **ProductPage.tsx** na pasta src e adicione o seguinte código:
```TypeScript
// ProductPage.tsx
import { Link } from "react-router-dom"

const ProductPage = () => {
  return (
    <div style={{ margin: "auto", width: "80%" }}>
      <h1>Product Page</h1>
      <div style={{ backgroundColor: "green", height: 700 }}></div>
      <div style={{ backgroundColor: "grey", height: 700 }}></div>
      <div style={{ backgroundColor: "blueviolet", height: 700 }}></div>
      <Link to="/">
        <h2>Go To Home Page</h2>
      </Link>
    </div>
  )
}

export default ProductPage
```
5 - Por último, mas não menos importante, remova todo o código padrão em **App.tsx**

Se você estiver usando o React Router v6+, adicione isto:
```TypeScript
// App.tsx
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"

import LandingPage from "./LandingPage"
import ProductPage from "./ProductPage"
import ScrollToTop from "./ScrollToTop"

const App = () => {
  return (
    <Router>
      <ScrollToTop>
        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route path="/product" element={<ProductPage />} />
        </Routes>
      </ScrollToTop>
    </Router>
  )
}

export default App
```

Observe que o componente **ScrollToTop** envolve o componente Routes, mas permanece dentro do componente Router.

Se você estiver trabalhando com o **React Router 5.x**, use isto:
```TypeScript
// App.tsx
import {
  BrowserRouter as Router,
  Route,
  Switch,
} from "react-router-dom"

import LandingPage from "./LandingPage"
import ProductPage from "./ProductPage"
import ScrollToTop from "./ScrollToTop"

const App = () => {
  return (
    <Router>
      <ScrollToTop>
        <Switch>
          <Route path="/" exact>
            <LandingPage />
          </Route>

          <Route path="/product">
            <ProductPage />
          </Route>
        </Switch>
      </ScrollToTop>
    </Router>
  )
}

export default App
```
Observe que o componente ScrollToTop envolve o componente Switch, mas permanece dentro do componente Router.



### Conclusão
Criamos um aplicativo simples de página única para demonstrar como rolar programaticamente até o topo da página em cada mudança de rota.
* * *
I hope you enjoyed the read!

Feel free to follow me on [GitHub](https://github.com/saymontavares), [LinkedIn](https://www.linkedin.com/in/saymon-tavares/) and [DEV](https://dev.to/saymontavares) for more!