Here is another method.

For react-router v4 you can also bind a listener to change in history event, in the following manner:

let firstMount = true; const App = (props) => { if (typeof window != 'undefined') { //incase you have server-side rendering too firstMount && props.history.listen((location, action) => { setImmediate(() => window.scrollTo(0, 0)); // ive explained why i used setImmediate below }); firstMount = false; } return ( <div> <MyHeader/> <Switch> <Route path='/' exact={true} component={IndexPage} /> <Route path='/other' component={OtherPage} /> // ... </Switch> <MyFooter/> </div> ); } //mounting app: render((<BrowserRouter><Route component={App} /></BrowserRouter>), document.getElementById('root')); 

The scroll level will be set to 0 without setImmediate() too if the route is changed by clicking on a link but if user presses back button on browser then it will not work as react reset the scroll level manually to previous level when the back button is pressed, so by using setImmediate() we cause our function to be executed after react is finish resetting the scroll level thus giving us the desired effect.

Here is another method.

For react-router v4 you can also bind a listener to change in history event, in the following manner:

let firstMount = true; const App = (props) => { if (typeof window != 'undefined') { //incase you have server-side rendering too firstMount && props.history.listen((location, action) => { setImmediate(() => window.scrollTo(0, 0)); // ive explained why i used setImmediate below }); firstMount = false; } return ( <div> <MyHeader/> <Switch> <Route path='/' exact={true} component={IndexPage} /> <Route path='/other' component={OtherPage} /> // ... </Switch> <MyFooter/> </div> ); } //mounting app: render((<BrowserRouter><Route component={App} /></BrowserRouter>), document.getElementById('root')); 

The scroll level will be set to 0 without setImmediate() too if the route is changed by clicking on a link but if user presses back button on browser then it will not work as browser reset the scroll level manually to the previous level when the back button is pressed, so by using setImmediate() we cause our function to be executed after browser is finished resetting the scroll level thus giving us the desired effect.