From b6b902797e2b9b82d2fd5d45c003dee887dd96a9 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sun, 10 Dec 2023 15:58:21 +0100 Subject: [PATCH] Scroll to top when changing page (#493) The scroll position was persisted when switching to a different page. Thus, when the current page was scrolled down and the next page was also scrollable, the top of the new page was not visible --- src/App.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index b8133c4c..cd44cc81 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,8 +8,8 @@ import { Container } from '@mui/material'; import CssBaseline from '@mui/material/CssBaseline'; -import React from 'react'; -import { Navigate, Route, Routes } from 'react-router-dom'; +import React, { useLayoutEffect } from 'react'; +import { Navigate, Route, Routes, useLocation } from 'react-router-dom'; import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev'; import { __DEV__ } from '@apollo/client/utilities/globals'; import { AppContext } from '@/components/context/AppContext'; @@ -42,8 +42,20 @@ if (__DEV__) { loadDevMessages(); loadErrorMessages(); } + +const ScrollToTop = () => { + const { pathname } = useLocation(); + + useLayoutEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); + + return null; +}; + export const App: React.FC = () => ( +