Scroll to top on location change
This commit is contained in:
parent
01eb8c8d3c
commit
6b0c0f2d88
1 changed files with 41 additions and 25 deletions
18
src/App.js
18
src/App.js
|
|
@ -2,7 +2,8 @@ import React, { Component } from 'react';
|
|||
import {
|
||||
BrowserRouter as Router,
|
||||
Route,
|
||||
Switch
|
||||
Switch,
|
||||
withRouter
|
||||
} from 'react-router-dom';
|
||||
|
||||
import hljs from 'highlight.js';
|
||||
|
|
@ -26,6 +27,7 @@ class App extends Component {
|
|||
render() {
|
||||
return (
|
||||
<Router>
|
||||
<ScrollToTop>
|
||||
<div className="App">
|
||||
<Header title={this.title} />
|
||||
|
||||
|
|
@ -56,6 +58,7 @@ class App extends Component {
|
|||
<Footer />
|
||||
|
||||
</div>
|
||||
</ScrollToTop>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
|
@ -69,6 +72,19 @@ class App extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
class ScrollToTop extends Component {
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.location !== prevProps.location) {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.props.children
|
||||
}
|
||||
}
|
||||
ScrollToTop = withRouter(ScrollToTop);
|
||||
|
||||
// Dummy About page just for playing around with ReactRouter
|
||||
class About extends Component {
|
||||
render () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue