Para o react-router v4 , aqui está um app create-react que consegue a restauração do scroll: http://router-scroll-top.surge.sh/ .
Para conseguir isso, você pode criar, decorar o Route
componente e aproveitar métodos de ciclo de vida:
import React, { Component } from 'react';
import { Route, withRouter } from 'react-router-dom';
class ScrollToTopRoute extends Component {
componentDidUpdate(prevProps) {
if (this.props.path === this.props.location.pathname && this.props.location.pathname !== prevProps.location.pathname) {
window.scrollTo(0, 0)
}
}
render() {
const { component: Component, ...rest } = this.props;
return <Route {...rest} render={props => (<Component {...props} />)} />;
}
}
export default withRouter(ScrollToTopRoute);
Em componentDidUpdate
, podemos verificar quando o caminho de localização muda e combiná-lo com o path
prop e, se estiver satisfeito, restaurar a rolagem da janela.
O que é legal nessa abordagem, é que podemos ter rotas que restauram a rolagem e rotas que não restauram a rolagem.
Aqui está um App.js
exemplo de como você pode usar o acima:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Lorem from 'react-lorem-component';
import ScrollToTopRoute from './ScrollToTopRoute';
import './App.css';
const Home = () => (
<div className="App-page">
<h2>Home</h2>
<Lorem count={12} seed={12} />
</div>
);
const About = () => (
<div className="App-page">
<h2>About</h2>
<Lorem count={30} seed={4} />
</div>
);
const AnotherPage = () => (
<div className="App-page">
<h2>This is just Another Page</h2>
<Lorem count={12} seed={45} />
</div>
);
class App extends Component {
render() {
return (
<Router>
<div className="App">
<div className="App-header">
<ul className="App-nav">
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/another-page">Another Page</Link></li>
</ul>
</div>
<Route exact path="/" component={Home} />
<ScrollToTopRoute path="/about" component={About} />
<ScrollToTopRoute path="/another-page" component={AnotherPage} />
</div>
</Router>
);
}
}
export default App;
Do código acima, o que é interessante apontar é que somente ao navegar /about
ou /another-page
rolar para cima a ação será executada. No entanto, ao continuar/
nenhuma restauração de rolagem acontecerá.
A base de código inteira pode ser encontrada aqui: https://github.com/rizedr/react-router-scroll-top
componentDidMount
do componente da nova rota?