nick/nickpegg.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Scroll to top on location change

Browse source
This commit is contained in:
Nick Pegg 2017-10-07 17:46:52 -07:00
parent 01eb8c8d3c
commit 6b0c0f2d88
1 changed files with 41 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/App.js
View file

@ -2,7 +2,8 @@ import React, { Component } from 'react';
import { import {
BrowserRouter as Router, BrowserRouter as Router,
Route, Route,
Switch Switch,
withRouter
} from 'react-router-dom'; } from 'react-router-dom';
import hljs from 'highlight.js'; import hljs from 'highlight.js';
@ -26,36 +27,38 @@ class App extends Component {
render() { render() {
return ( return (
<Router> <Router>
<div className="App"> <ScrollToTop>
<Header title={this.title} /> <div className="App">
<Header title={this.title} />
<Container> <Container>
<Row> <Row>
<Column width="two" className="nav"> <Column width="two" className="nav">
<NavList /> <NavList />
<TagNav /> <TagNav />
</Column> </Column>
<Column width="eight"> <Column width="eight">
<Switch> <Switch>
<Route exact path="/" component={Posts} /> <Route exact path="/" component={Posts} />
{ /* Page routes */ } { /* Page routes */ }
<Route path="/about" component={About} /> <Route path="/about" component={About} />
{ /* Post routes */ } { /* Post routes */ }
<Route path="/page/:page" component={Posts} /> <Route path="/page/:page" component={Posts} />
<Route path="/:year/:month/:slug" component={Post} /> <Route path="/:year/:month/:slug" component={Post} />
{ /* 404 fallback */ } { /* 404 fallback */ }
<Route component={NotFound} /> <Route component={NotFound} />
</Switch> </Switch>
</Column> </Column>
</Row> </Row>
</Container> </Container>
<Footer /> <Footer />
</div> </div>
</ScrollToTop>
</Router> </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 // Dummy About page just for playing around with ReactRouter
class About extends Component { class About extends Component {
render () { render () {