Skip to content

Commit

Permalink
Scroll to top when changing page (#493)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
schroda authored Dec 10, 2023
1 parent c51897e commit b6b9027
Showing 1 changed file with 14 additions and 2 deletions.
16 changes: 14 additions & 2 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 = () => (
<AppContext>
<ScrollToTop />
<ServerUpdateChecker />
<CssBaseline />
<DefaultNavBar />
Expand Down

0 comments on commit b6b9027

Please sign in to comment.