title: Restore scroll position when navigating with React Router 6
body: <p>How do I set up React Router 6 to restore scroll position when I navigate and when the browser window is refreshed?</p>
  <p>React Router 5 has a <a href="https://v5.reactrouter.com/web/guides/scroll-restoration" rel="nofollow noreferrer">page about scroll restoration</a>, but I can't find anything about scrolling in <a href="https://reactrouter.com/docs/en/v6/api" rel="nofollow noreferrer">the docs for v6</a>, so I guess that you're supposed to handle this yourself with another package. Fair enough, but I can't find anything that's compatible with React Router 6.</p>
  <p>The packages <a href="https://github.com/nanyang24/react-scroll-restoration#readme" rel="nofollow noreferrer">react-scroll-restoration</a> and <a href="https://github.com/oaf-project/oaf-react-router#readme" rel="nofollow noreferrer">oaf-react-router</a> require v5. (oaf-react-router does list that it supports v6, but the <a href="https://github.com/oaf-project/oaf-react-router#basic-usage" rel="nofollow noreferrer">basic usage code example</a> isn't compatible with v6, and <a href="https://github.com/oaf-project/oaf-react-router/issues/210" rel="nofollow noreferrer">the related issue #210</a> is still open.)</p>
  <p>Gatsby and Next.js support scroll restoration out of the box, but I doesn't look like there's a neatly packaged package that you can just use.</p>
  <p>This little <a href="https://stackblitz.com/edit/bootstrap-5-9obbti" rel="nofollow noreferrer">demo app with server side rendered pages</a> does what I want. Scroll position is restored when navigation back and forth and refreshing the browser window.</p>
  <p>Here is <a href="https://react-ts-1b4lqz.stackblitz.io/" rel="nofollow noreferrer">the same app using React Router 6</a>, where the scroll position isn't saved and restored, but actually reused between pages. The usual workaround for that is to scroll to the top whenever the page is navigated, but I am not interested in that behaviour.</p>
  <p>Edit: <a href="https://react-query.tanstack.com/guides/scroll-restoration" rel="nofollow noreferrer">React Query writes that the issue with scroll restoration is that pages are refetching data</a>, thereby implying that if the data for rendering the pages is there, scroll restoration just works. I cannot confirm that, because my small React Router 6 app has the issue even without doing any data fetching at all. I feel like there is something small think I am missing in order to get it to work.</p>
  <p>Rant: I am quite surprised that the typical answer to this issue is to call <code>window.scrollTo(0, 0)</code> when navigating. This only fixes the issue of the scroll position being transferred between pages. When the scroll position isn't restored, the user experience when navigating between pages is seriously deteriorated. I guess this is partly why pop-up windows have become so popular, but they bring a long suite of other UX issues, so I really want to avoid using them.</p>