maverick/netlify-cms-react-starter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ScrollToTop on router nav

Browse source
This commit is contained in:
Jinksi 2017-07-03 10:34:35 +10:00
parent 68ee66059c
commit cf83f36775
3 changed files with 46 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/App.js
View file

@ -2,6 +2,7 @@ import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Helmet from 'react-helmet'
import ScrollToTop from './components/ScrollToTop'
import Home from './views/Home'
import About from './views/About'
import NoMatch from './views/NoMatch'
@ -28,30 +29,34 @@ class App extends Component {
componentWillMount () {
globalStyles()
}
render () {
return (
<Router>
<div>
<Helmet titleTemplate={`${siteTitle} | %s`} />
<Nav>
<Logo>
<span role='img' aria-label='Watermelon'>🍉</span>
</Logo>
{routes.map((route, i) => (
<NavLink key={i} {...route} />
))}
</Nav>
<Switch>
{routes.map((route, i) => (
<Route
{...route}
key={i}
render={() => <route.comp {...route} />}
/>
))}
<Route component={NoMatch} />
</Switch>
</div>
<ScrollToTop>
<div>
<Helmet titleTemplate={`${siteTitle} | %s`} />
<Nav>
<Logo>
<span role='img' aria-label='Watermelon'>🍉</span>
</Logo>
{routes.map((route, i) => (
<NavLink key={i} {...route} />
))}
</Nav>
<Switch>
{routes.map((route, i) => (
<Route
{...route}
key={i}
render={() => <route.comp {...route} />}
/>
))}
<Route component={NoMatch} />
</Switch>
</div>
</ScrollToTop>
</Router>
)
}

16
src/components/ScrollToTop.js Normal file
View file

@ -0,0 +1,16 @@
import { Component } from 'react'
import { withRouter } from 'react-router'
class ScrollToTop extends Component {
componentDidUpdate (prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0)
}
}
render () {
return this.props.children
}
}
export default withRouter(ScrollToTop)

8
yarn.lock
View file

@ -1790,13 +1790,13 @@ debug@2.2.0, debug@~2.2.0:
dependencies:
ms "0.7.1"
debug@2.6.7, debug@^2.1.1, debug@^2.2.0:
debug@2.6.7, debug@^2.1.1, debug@^2.2.0, debug@^2.6.0, debug@^2.6.6:
version "2.6.7"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
dependencies:
ms "2.0.0"
debug@^2.6.0, debug@^2.6.3, debug@^2.6.6, debug@^2.6.8:
debug@^2.6.3, debug@^2.6.8:
version "2.6.8"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
dependencies:
@ -3105,11 +3105,11 @@ iconv-lite@0.4.13:
version "0.4.13"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
iconv-lite@^0.4.13, iconv-lite@~0.4.13:
iconv-lite@^0.4.13:
version "0.4.15"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
iconv-lite@^0.4.17:
iconv-lite@^0.4.17, iconv-lite@~0.4.13:
version "0.4.17"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.17.tgz#4fdaa3b38acbc2c031b045d0edcdfe1ecab18c8d"