react-router scroll to top on every transition

by

but classes are so 2018

ScrollToTop implementation with React Hooks

ScrollToTop.js

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}

export default withRouter(ScrollToTop);

Usage:

<Router>
  <Fragment>
    <ScrollToTop />
    <Switch>
        <Route path="https://stackoverflow.com/" exact component={Home} />
    </Switch>
  </Fragment>
</Router>

ScrollToTop can also be implemented as a wrapper component:

ScrollToTop.js

import React, { useEffect, Fragment } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history, children }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return <Fragment>{children}</Fragment>;
}

export default withRouter(ScrollToTop);

Usage:

<Router>
  <ScrollToTop>
    <Switch>
        <Route path="https://stackoverflow.com/" exact component={Home} />
    </Switch>
  </ScrollToTop>
</Router>

More Related Contents:

  1. How to sync Redux state and url hash tag params
  2. React-router URLs don’t work when refreshing or writing manually
  3. Programmatically Navigate using react-router
  4. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  5. Pass props in Link react-router
  6. How to use Redirect in version 5 of react-router-dom of Reactjs
  7. React-Router: No Not Found Route?
  8. Problem in redirecting programmatically to a route in react router v6
  9. React Router with optional path parameter
  10. Use anchors with react-router
  11. Intercept/handle browser’s back button in React-router?
  12. How to make a shared state between two react components?
  13. React Routing works in local machine but not Heroku
  14. Multiple path names for a same component in React Router
  15. React doesn’t reload component data on route param change or query change
  16. react-router getting this.props.location in child components
  17. Get path params in react-router v4
  18. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  19. Client Routing (using react-router) and Server-Side Routing
  20. Multiple Nested Routes in react-router-dom v4
  21. React-router: How to manually invoke Link?
  22. onEnter not called in React-Router
  23. react-router go back a page how do you configure history?
  24. Matched leaf route at location “/” does not have an element
  25. How to manually invoke Link in React-router?
  26. How to create a protected route with react-router-dom?
  27. Material-ui adding Link component from react-router
  28. How to use normal anchor links with react-router
  29. React router global header
  30. How can I redirect in React Router v6?

Leave a Comment