2 files changed, 24 insertions, 7 deletions
diff --git a/gui/src/renderer/components/AppRouter.tsx b/gui/src/renderer/components/AppRouter.tsx
index d061c7b9d5..18a8b51063 100644
--- a/gui/src/renderer/components/AppRouter.tsx
+++ b/gui/src/renderer/components/AppRouter.tsx
@@ -12,6 +12,7 @@ import SelectLocationPage from '../containers/SelectLocationPage';
 import SettingsPage from '../containers/SettingsPage';
 import SupportPage from '../containers/SupportPage';
 import WireguardSettingsPage from '../containers/WireguardSettingsPage';
+import withAppContext, { IAppContext } from '../context';
 import { IHistoryProps, ITransitionSpecification, transitions, withHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { DeviceRevokedView } from './DeviceRevokedView';
@@ -36,12 +37,12 @@ interface IAppRoutesState {
   action?: Action;
 }
 
-class AppRouter extends React.Component<IHistoryProps, IAppRoutesState> {
+class AppRouter extends React.Component<IHistoryProps & IAppContext, IAppRoutesState> {
   private unobserveHistory?: () => void;
 
   private focusRef = React.createRef<IFocusHandle>();
 
-  constructor(props: IHistoryProps) {
+  constructor(props: IHistoryProps & IAppContext) {
     super(props);
 
     this.state = {
@@ -54,6 +55,7 @@ class AppRouter extends React.Component<IHistoryProps, IAppRoutesState> {
     // React throttles updates, so it's impossible to capture the intermediate navigation without
     // listening to the history directly.
     this.unobserveHistory = this.props.history.listen((location, action, transition) => {
+      this.props.app.setNavigationHistory(this.props.history.asObject);
       this.setState({
         currentLocation: location,
         transition,
@@ -114,6 +116,6 @@ class AppRouter extends React.Component<IHistoryProps, IAppRoutesState> {
   };
 }
 
-const AppRoutesWithRouter = withHistory(AppRouter);
+const AppRoutesWithRouter = withAppContext(withHistory(AppRouter));
 
 export default AppRoutesWithRouter;
diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index 2628f484eb..7e231646ce 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -1,7 +1,8 @@
-import React, { useCallback, useContext, useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef } from 'react';
 
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
+import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
 import { useHistory } from '../lib/history';
 import { useCombinedRefs } from '../lib/utilityHooks';
@@ -114,18 +115,32 @@ export const NavigationScrollbars = React.forwardRef(function NavigationScrollba
 ) {
   const history = useHistory();
   const { onScroll } = useContext(NavigationScrollContext);
+  const { setScrollPositions } = useAppContext();
 
   const ref = useRef<CustomScrollbarsRef>();
   const combinedRefs = useCombinedRefs(forwardedRef, ref);
 
   const { addScrollPosition, removeScrollPosition } = useActions(userInterface);
-  const scrollPosition = useSelector(
-    (state) => state.userInterface.scrollPosition[history.location.pathname],
-  );
+  const scrollPositions = useSelector((state) => state.userInterface.scrollPosition);
+
+  useEffect(() => {
+    const path = history.location.pathname;
+    const beforeunload = () => {
+      if (ref.current) {
+        const scrollPosition = ref.current.getScrollPosition();
+        setScrollPositions({ ...scrollPositions, [path]: scrollPosition });
+      }
+    };
+
+    window.addEventListener('beforeunload', beforeunload);
+
+    return () => window.removeEventListener('beforeunload', beforeunload);
+  }, [scrollPositions]);
 
   useLayoutEffect(() => {
     const path = history.location.pathname;
 
+    const scrollPosition = scrollPositions[history.location.pathname];
     if (history.action === 'POP' && scrollPosition) {
       ref.current?.scrollTo(...scrollPosition);
       removeScrollPosition(path);