react-router scroll to top on every transition

React Router is a powerful library that allows developers to handle routing in their React applications. One common requirement is to scroll to the top of the page on every route transition. In this blog post, we will explore different solutions to achieve this behavior using React Router.

Solution 1: Using React Router’s useEffect Hook

React Router provides a useEffect hook that allows us to perform side effects when the component mounts or updates. We can leverage this hook to scroll to the top of the page on every route transition. Here’s an example implementation:

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

const ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

export default ScrollToTop;

In the code snippet above, we create a component called ScrollToTop that uses the useLocation hook from React Router to get the current pathname. We then use the useEffect hook to scroll to the top of the page whenever the pathname changes.

To use this component, we need to wrap our Router component with it:

import { BrowserRouter as Router, Route } from 'react-router-dom';
import ScrollToTop from './ScrollToTop';

const App = () => {
  return (
    <Router>
      <ScrollToTop />
      {/* Your routes */}
    </Router>
  );
};

export default App;

Solution 2: Using React Router’s ScrollToTop Component

React Router also provides a built-in ScrollToTop component that we can use to achieve the desired behavior. Here’s how we can use it:

import { BrowserRouter as Router, Route, ScrollToTop } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <ScrollToTop />
      {/* Your routes */}
    </Router>
  );
};

export default App;

By including the ScrollToTop component from React Router, the page will automatically scroll to the top on every route transition.

Final HTML Output:

<div>
  <h1>react-router scroll to top on every transition</h1>
  <h2>Solution 1: Using React Router's useEffect Hook</h2>
  <pre><code>
    import { useEffect } from 'react';
    import { useLocation } from 'react-router-dom';

    const ScrollToTop = () => {
      const { pathname } = useLocation();

      useEffect(() => {
        window.scrollTo(0, 0);
      }, [pathname]);

      return null;
    };

    export default ScrollToTop;
  </code></pre>
  <p>
    In the code snippet above, we create a component called <code>ScrollToTop</code> that uses the <code>useLocation</code> hook from React Router to get the current pathname. We then use the <code>useEffect</code> hook to scroll to the top of the page whenever the <code>pathname</code> changes.
  </p>
  <p>
    To use this component, we need to wrap our <code>Router</code> component with it:
  </p>
  <pre><code>
    import { BrowserRouter as Router, Route } from 'react-router-dom';
    import ScrollToTop from './ScrollToTop';

    const App = () => {
      return (
        <Router>
          <ScrollToTop />
          {/* Your routes */}
        </Router>
      );
    };

    export default App;
  </code></pre>
  <h2>Solution 2: Using React Router's ScrollToTop Component</h2>
  <pre><code>
    import { BrowserRouter as Router, Route, ScrollToTop } from 'react-router-dom';

    const App = () => {
      return (
        <Router>
          <ScrollToTop />
          {/* Your routes */}
        </Router>
      );
    };

    export default App;
  </code></pre>
  <p>
    By including the <code>ScrollToTop</code> component from React Router, the page will automatically scroll to the top on every route transition.
  </p>
</div>