React Router scroll page to the top after transition

Question

In my application, when I change from one page to another the page is being kept at the same point it was on the previous page. I want to make it go to the top when I swap pages.

The react-router documentation has a solution: https://reactrouter.com/web/guides/scroll-restoration

I implemented it inside a component called ScrollToTop and wrapped my whole application with it, but everything inside it just don't get rendered. I have no idea why.

ScrollToTop:

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

export default function ScrollToTop() {
  const { pathname } = useLocation();

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

  return null;
}

App:

import React from 'react';

import './App.css';

import Layout from './containers/Layout/Layout'
import MainPageConfig from './containers/MainPageConfig/MainPageConfig'

import ScrollToTop from './HOC/ScrollToTop'

import { BrowserRouter, Route, Switch } from 'react-router-dom'


function App() {
  return (
    
      <BrowserRouter >        
        <Layout>
          <ScrollToTop>
            <Switch>
              <Route path="/" exact component={MainPageConfig} />
            </Switch>
          </ScrollToTop>
        </Layout>
      </BrowserRouter>
    
    
  );
}

export default App;

I also tried the suggestions of this post: react-router scroll to top on every transition

In both cases I get the same result.

How could I solve this?

P.S. I also tried to put ScrollToTop outside Layout, but nothing changes.

I already did that. Actually, my original application has multiple routes. I removed them just to make it simpler. But why did you think that? Maybe it can give me an insight. — Berg_Durden, Oct 14 '20 at 23:52

score 6 · Accepted Answer · answered Oct 15 '20 at 02:03

6

Can you try the below

 <BrowserRouter >        
    <Layout>
      <ScrollToTop />
        <Switch>
          <Route path="/" exact component={MainPageConfig} />
        </Switch>
    </Layout>
  </BrowserRouter>

answered Oct 15 '20 at 02:03

Rain.To

504
2
7

I don't understand. That's exactly the same code I posted in the question. – Berg_Durden Oct 15 '20 at 02:37
Switch is not wrapped inside the ScrollToTop component. Just tried that on a code sandbox. – Rain.To Oct 15 '20 at 02:52
You're right. My mistake. It worked. I just checked the documentation and that's indeed how it should be implemented, but I couldn't see. Thank you very much. – Berg_Durden Oct 15 '20 at 12:19

score 1 · Answer 2 · answered Jul 30 '21 at 06:41

1

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

export default function ScrollToTop({children}) {
  const { pathname } = useLocation();

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

  return <>{children}</>;
}

just pass children down the tree

answered Jul 30 '21 at 06:41

Simas

21
4

This is a more concise implementation and it worked out better for me. – Klem Lloyd Mwenya Mar 19 '22 at 21:52

score 0 · Answer 3 · answered Mar 18 '23 at 20:16

Since React Router 6.4, the ScrollRestoration component can be used to scroll to the top after navigating to a new page (as well as restoring the old scroll position on returning to a previous page).

This component will emulate the browser's scroll restoration on location changes after loaders have completed to ensure the scroll position is restored to the right spot, even across domains.

Render ScrollRestoration once in the application's root route component to use it:

import { ScrollRestoration } from "react-router-dom";
function App() {
    return <>
        { /* content here... */ }
        <ScrollRestoration />
    </>;
}

React Router scroll page to the top after transition

3 Answers3