Adjust all uses of history to use the new methods

16 files changed, 56 insertions, 58 deletions

diff --git a/gui/src/renderer/components/ExpiredAccountAddTime.tsx b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
index a9b83af6a6..24c335a551 100644
--- a/gui/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/gui/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 import { links, colors } from '../../config.json';
@@ -8,7 +7,7 @@ import { formatRelativeDate } from '../../shared/date-helper';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
-import History from '../lib/history';
+import { transitions, useHistory } from '../lib/history';
 import account from '../redux/account/actions';
 import { IReduxState } from '../redux/store';
 import * as AppButton from './AppButton';
@@ -87,7 +86,7 @@ export function VoucherInput() {
   }, [history]);
 
   const navigateBack = useCallback(() => {
-    history.goBack();
+    history.pop();
   }, [history]);
 
   return (
@@ -252,7 +251,7 @@ function HeaderBar() {
 function useFinishedCallback() {
   const { loggedIn } = useActions(account);
 
-  const history = useHistory() as History;
+  const history = useHistory();
   const isNewAccount = useSelector(
     (state: IReduxState) =>
       state.account.status.type === 'ok' && state.account.status.method === 'new_account',
@@ -264,7 +263,7 @@ function useFinishedCallback() {
       loggedIn();
     }
 
-    history.resetWith('/main');
+    history.reset('/main', undefined, transitions.push);
   }, [isNewAccount, loggedIn, history]);
 
   return callback;
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index b89811913e..9f6d4b82a3 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import { TunnelState } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
+import { useHistory } from '../lib/history';
 import { IReduxState } from '../redux/store';
 import { FocusFallback } from './Focus';
 import ImageView from './ImageView';
@@ -103,7 +103,7 @@ export function HeaderBarSettingsButton() {
   const history = useHistory();
 
   const openSettings = useCallback(() => {
-    history.push('/settings');
+    history.show('/settings');
   }, [history]);
 
   return (
diff --git a/gui/src/renderer/components/KeyboardNavigation.tsx b/gui/src/renderer/components/KeyboardNavigation.tsx
index 3aefd7c684..94b5097389 100644
--- a/gui/src/renderer/components/KeyboardNavigation.tsx
+++ b/gui/src/renderer/components/KeyboardNavigation.tsx
@@ -1,18 +1,17 @@
 import React, { useCallback, useEffect } from 'react';
-import { useHistory } from 'react-router';
-import History from '../lib/history';
+import { useHistory } from '../lib/history';
 
 interface IKeyboardNavigationProps {
   children: React.ReactElement;
 }
 
 export default function KeyboardNavigation(props: IKeyboardNavigationProps) {
-  const history = useHistory() as History;
+  const history = useHistory();
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
-        history.reset();
+        history.dismiss(true);
       }
     },
     [history.reset],
diff --git a/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx b/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
index cb7c497011..fea2fe23db 100644
--- a/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
+++ b/gui/src/renderer/components/LinuxSplitTunnelingSettings.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { useHistory } from 'react-router';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
@@ -21,6 +20,7 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
+import { useHistory } from '../lib/history';
 
 const StyledPageCover = styled.div({}, (props: { show: boolean }) => ({
   position: 'absolute',
@@ -154,7 +154,7 @@ export default function LinuxSplitTunnelingSettings() {
             <NavigationContainer>
               <NavigationBar>
                 <NavigationItems>
-                  <BackBarItem action={history.goBack}>
+                  <BackBarItem action={history.pop}>
                     {
                       // TRANSLATORS: Back button in navigation bar
                       messages.pgettext('navigation-bar', 'Advanced')
diff --git a/gui/src/renderer/components/MainView.tsx b/gui/src/renderer/components/MainView.tsx
index 9698321940..3891a6e48b 100644
--- a/gui/src/renderer/components/MainView.tsx
+++ b/gui/src/renderer/components/MainView.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router';
 import { hasExpired } from '../../shared/account-expiry';
 import { IReduxState } from '../redux/store';
 import ConnectPage from '../containers/ConnectPage';
 import ExpiredAccountErrorViewContainer from '../containers/ExpiredAccountErrorViewContainer';
+import { useHistory } from '../lib/history';
 
 export default function MainView() {
   const history = useHistory();
diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index 746fc6faa4..f9674e1131 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router';
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import useActions from '../lib/actionsHook';
+import { useHistory } from '../lib/history';
 import { useCombinedRefs } from '../lib/utilityHooks';
 import { IReduxState } from '../redux/store';
 import userInterface from '../redux/userinterface/actions';
diff --git a/gui/src/renderer/containers/AccountPage.tsx b/gui/src/renderer/containers/AccountPage.tsx
index accd4287b2..985161c838 100644
--- a/gui/src/renderer/containers/AccountPage.tsx
+++ b/gui/src/renderer/containers/AccountPage.tsx
@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
-import { RouteComponentProps, withRouter } from 'react-router';
 import { links } from '../../config.json';
 import consumePromise from '../../shared/promise';
 import Account from '../components/Account';
 
 import withAppContext, { IAppContext } from '../context';
+import { IHistoryProps, withHistory } from '../lib/history';
 import { IReduxState, ReduxDispatch } from '../redux/store';
 
 const mapStateToProps = (state: IReduxState) => ({
@@ -13,16 +13,16 @@ const mapStateToProps = (state: IReduxState) => ({
   expiryLocale: state.userInterface.locale,
   isOffline: state.connection.isBlocked,
 });
-const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => {
   return {
     onLogout: () => {
       consumePromise(props.app.logout());
     },
     onClose: () => {
-      props.history.goBack();
+      props.history.pop();
     },
     onBuyMore: () => props.app.openLinkWithAuth(links.purchase),
   };
 };
 
-export default withAppContext(withRouter(connect(mapStateToProps, mapDispatchToProps)(Account)));
+export default withAppContext(withHistory(connect(mapStateToProps, mapDispatchToProps)(Account)));
diff --git a/gui/src/renderer/containers/AdvancedSettingsPage.tsx b/gui/src/renderer/containers/AdvancedSettingsPage.tsx
index 0aaa4ee3f4..a9e603718b 100644
--- a/gui/src/renderer/containers/AdvancedSettingsPage.tsx
+++ b/gui/src/renderer/containers/AdvancedSettingsPage.tsx
@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import { RouteComponentProps, withRouter } from 'react-router';
 import {
   BridgeState,
   IDnsOptions,
@@ -11,6 +10,7 @@ import RelaySettingsBuilder from '../../shared/relay-settings-builder';
 import AdvancedSettings from '../components/AdvancedSettings';
 
 import withAppContext, { IAppContext } from '../context';
+import { IHistoryProps, withHistory } from '../lib/history';
 import { RelaySettingsRedux } from '../redux/settings/reducers';
 import { IReduxState, ReduxDispatch } from '../redux/store';
 
@@ -56,10 +56,10 @@ const mapRelaySettingsToProtocolAndPort = (relaySettings: RelaySettingsRedux) =>
   }
 };
 
-const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => {
   return {
     onClose: () => {
-      props.history.goBack();
+      props.history.pop();
     },
     setOpenVpnRelayProtocolAndPort: async (protocol?: RelayProtocol, port?: number) => {
       const relayUpdate = RelaySettingsBuilder.normal()
@@ -169,5 +169,5 @@ const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps
 };
 
 export default withAppContext(
-  withRouter(connect(mapStateToProps, mapDispatchToProps)(AdvancedSettings)),
+  withHistory(connect(mapStateToProps, mapDispatchToProps)(AdvancedSettings)),
 );
diff --git a/gui/src/renderer/containers/ConnectPage.tsx b/gui/src/renderer/containers/ConnectPage.tsx
index 99882bf8b1..d7197095f1 100644
--- a/gui/src/renderer/containers/ConnectPage.tsx
+++ b/gui/src/renderer/containers/ConnectPage.tsx
@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
-import { RouteComponentProps, withRouter } from 'react-router';
 import { sprintf } from 'sprintf-js';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import Connect from '../components/Connect';
 import withAppContext, { IAppContext } from '../context';
+import { IHistoryProps, withHistory } from '../lib/history';
 import { IRelayLocationRedux, RelaySettingsRedux } from '../redux/settings/reducers';
 import { IReduxState, ReduxDispatch } from '../redux/store';
 
@@ -71,10 +71,10 @@ const mapStateToProps = (state: IReduxState) => {
   };
 };
 
-const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => {
   return {
     onSelectLocation: () => {
-      props.history.push('/select-location');
+      props.history.show('/select-location');
     },
     onConnect: async () => {
       try {
@@ -100,4 +100,4 @@ const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps
   };
 };
 
-export default withAppContext(withRouter(connect(mapStateToProps, mapDispatchToProps)(Connect)));
+export default withAppContext(withHistory(connect(mapStateToProps, mapDispatchToProps)(Connect)));
diff --git a/gui/src/renderer/containers/ExpiredAccountErrorViewContainer.tsx b/gui/src/renderer/containers/ExpiredAccountErrorViewContainer.tsx
index 6297a17f42..372f9607c9 100644
--- a/gui/src/renderer/containers/ExpiredAccountErrorViewContainer.tsx
+++ b/gui/src/renderer/containers/ExpiredAccountErrorViewContainer.tsx
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
-import { RouteComponentProps, withRouter } from 'react-router';
 import log from '../../shared/logging';
 import ExpiredAccountErrorView from '../components/ExpiredAccountErrorView';
+import { IHistoryProps, withHistory } from '../lib/history';
 
 import withAppContext, { IAppContext } from '../context';
 import { IReduxState, ReduxDispatch } from '../redux/store';
@@ -13,7 +13,7 @@ const mapStateToProps = (state: IReduxState) => ({
   isBlocked: state.connection.isBlocked,
   blockWhenDisconnected: state.settings.blockWhenDisconnected,
 });
-const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => {
   return {
     onExternalLinkWithAuth: (url: string) => props.app.openLinkWithAuth(url),
     onDisconnect: async () => {
@@ -37,5 +37,5 @@ const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps
 };
 
 export default withAppContext(
-  withRouter(connect(mapStateToProps, mapDispatchToProps)(ExpiredAccountErrorView)),
+  withHistory(connect(mapStateToProps, mapDispatchToProps)(ExpiredAccountErrorView)),
 );
diff --git a/gui/src/renderer/containers/PreferencesPage.tsx b/gui/src/renderer/containers/PreferencesPage.tsx
index 3bd4a20e44..671ba33c26 100644
--- a/gui/src/renderer/containers/PreferencesPage.tsx
+++ b/gui/src/renderer/containers/PreferencesPage.tsx
@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
-import { RouteComponentProps, withRouter } from 'react-router';
 import { IDnsOptions } from '../../shared/daemon-rpc-types';
 import log from '../../shared/logging';
 import consumePromise from '../../shared/promise';
 import Preferences from '../components/Preferences';
 import withAppContext, { IAppContext } from '../context';
+import { IHistoryProps, withHistory } from '../lib/history';
 import { IReduxState, ReduxDispatch } from '../redux/store';
 
 const mapStateToProps = (state: IReduxState) => ({
@@ -20,10 +20,10 @@ const mapStateToProps = (state: IReduxState) => ({
   dns: state.settings.dns,
 });
 
-const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => {
   return {
     onClose: () => {
-      props.history.goBack();
+      props.history.pop();
     },
     setEnableSystemNotifications: (flag: boolean) => {
       props.app.setEnableSystemNotifications(flag);
@@ -60,5 +60,5 @@ const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps
 };
 
 export default withAppContext(
-  withRouter(connect(mapStateToProps, mapDispatchToProps)(Preferences)),
+  withHistory(connect(mapStateToProps, mapDispatchToProps)(Preferences)),
 );
diff --git a/gui/src/renderer/containers/SelectLanguagePage.tsx b/gui/src/renderer/containers/SelectLanguagePage.tsx
index 5c073c22e1..1bd21c84dd 100644
--- a/gui/src/renderer/containers/SelectLanguagePage.tsx
+++ b/gui/src/renderer/containers/SelectLanguagePage.tsx
@@ -1,26 +1,26 @@
 import { connect } from 'react-redux';
-import { RouteComponentProps, withRouter } from 'react-router';
 import SelectLanguage from '../components/SelectLanguage';
 import withAppContext, { IAppContext } from '../context';
+import { IHistoryProps, withHistory } from '../lib/history';
 import { IReduxState, ReduxDispatch } from '../redux/store';
 
 const mapStateToProps = (state: IReduxState) => ({
   preferredLocale: state.settings.guiSettings.preferredLocale,
 });
 
-const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => {
   return {
     preferredLocalesList: props.app.getPreferredLocaleList(),
     async setPreferredLocale(locale: string) {
       await props.app.setPreferredLocale(locale);
-      props.history.goBack();
+      props.history.pop();
     },
     onClose() {
-      props.history.goBack();
+      props.history.pop();
     },
   };
 };
 
 export default withAppContext(
-  withRouter(connect(mapStateToProps, mapDispatchToProps)(SelectLanguage)),
+  withHistory(connect(mapStateToProps, mapDispatchToProps)(SelectLanguage)),
 );
diff --git a/gui/src/renderer/containers/SelectLocationPage.tsx b/gui/src/renderer/containers/SelectLocationPage.tsx
index fbad19285b..b3aab7eb69 100644
--- a/gui/src/renderer/containers/SelectLocationPage.tsx
+++ b/gui/src/renderer/containers/SelectLocationPage.tsx
@@ -1,5 +1,4 @@
 import { connect } from 'react-redux';
-import { RouteComponentProps, withRouter } from 'react-router';
 import { bindActionCreators } from 'redux';
 import BridgeSettingsBuilder from '../../shared/bridge-settings-builder';
 import { LiftedConstraint, RelayLocation } from '../../shared/daemon-rpc-types';
@@ -7,6 +6,7 @@ import log from '../../shared/logging';
 import RelaySettingsBuilder from '../../shared/relay-settings-builder';
 import SelectLocation from '../components/SelectLocation';
 import withAppContext, { IAppContext } from '../context';
+import { IHistoryProps, withHistory } from '../lib/history';
 import { IReduxState, ReduxDispatch } from '../redux/store';
 import userInterfaceActions from '../redux/userinterface/actions';
 import { LocationScope } from '../redux/userinterface/reducers';
@@ -40,17 +40,17 @@ const mapStateToProps = (state: IReduxState) => {
     allowBridgeSelection,
   };
 };
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => {
   const userInterface = bindActionCreators(userInterfaceActions, dispatch);
 
   return {
-    onClose: () => props.history.goBack(),
+    onClose: () => props.history.dismiss(),
     onChangeLocationScope: (scope: LocationScope) => {
       userInterface.setLocationScope(scope);
     },
     onSelectExitLocation: async (relayLocation: RelayLocation) => {
       // dismiss the view first
-      props.history.goBack();
+      props.history.dismiss();
 
       try {
         const relayUpdate = RelaySettingsBuilder.normal().location.fromRaw(relayLocation).build();
@@ -63,7 +63,7 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: RouteComponentProps
     },
     onSelectBridgeLocation: async (bridgeLocation: RelayLocation) => {
       // dismiss the view first
-      props.history.goBack();
+      props.history.dismiss();
 
       try {
         await props.app.updateBridgeSettings(
@@ -75,7 +75,7 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: RouteComponentProps
     },
     onSelectClosestToExit: async () => {
       // dismiss the view first
-      props.history.goBack();
+      props.history.dismiss();
 
       try {
         await props.app.updateBridgeSettings(new BridgeSettingsBuilder().location.any().build());
@@ -87,5 +87,5 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: RouteComponentProps
 };
 
 export default withAppContext(
-  withRouter(connect(mapStateToProps, mapDispatchToProps)(SelectLocation)),
+  withHistory(connect(mapStateToProps, mapDispatchToProps)(SelectLocation)),
 );
diff --git a/gui/src/renderer/containers/SettingsPage.tsx b/gui/src/renderer/containers/SettingsPage.tsx
index 6985fd927c..97ff917e7e 100644
--- a/gui/src/renderer/containers/SettingsPage.tsx
+++ b/gui/src/renderer/containers/SettingsPage.tsx
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
-import { RouteComponentProps, withRouter } from 'react-router';
 import Settings from '../components/Settings';
 import withAppContext, { IAppContext } from '../context';
+import { IHistoryProps, withHistory } from '../lib/history';
 import { IReduxState, ReduxDispatch } from '../redux/store';
 
 const mapStateToProps = (state: IReduxState, props: IAppContext) => ({
@@ -16,10 +16,10 @@ const mapStateToProps = (state: IReduxState, props: IAppContext) => ({
   suggestedIsBeta: state.version.suggestedIsBeta ?? false,
   isOffline: state.connection.isBlocked,
 });
-const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => {
   return {
     onQuit: () => props.app.quit(),
-    onClose: () => props.history.goBack(),
+    onClose: () => props.history.dismiss(),
     onViewSelectLanguage: () => props.history.push('/settings/language'),
     onViewAccount: () => props.history.push('/settings/account'),
     onViewSupport: () => props.history.push('/settings/support'),
@@ -29,4 +29,4 @@ const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps
   };
 };
 
-export default withAppContext(withRouter(connect(mapStateToProps, mapDispatchToProps)(Settings)));
+export default withAppContext(withHistory(connect(mapStateToProps, mapDispatchToProps)(Settings)));
diff --git a/gui/src/renderer/containers/SupportPage.tsx b/gui/src/renderer/containers/SupportPage.tsx
index 1df4827223..a4bdbd4ac3 100644
--- a/gui/src/renderer/containers/SupportPage.tsx
+++ b/gui/src/renderer/containers/SupportPage.tsx
@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
-import { RouteComponentProps, withRouter } from 'react-router';
 import { bindActionCreators } from 'redux';
 import consumePromise from '../../shared/promise';
 import Support from '../components/Support';
 import withAppContext, { IAppContext } from '../context';
+import { IHistoryProps, withHistory } from '../lib/history';
 import { IReduxState, ReduxDispatch } from '../redux/store';
 import supportActions from '../redux/support/actions';
 
@@ -16,12 +16,12 @@ const mapStateToProps = (state: IReduxState) => ({
   suggestedIsBeta: state.version.suggestedIsBeta ?? false,
 });
 
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext & RouteComponentProps) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext & IHistoryProps) => {
   const { saveReportForm, clearReportForm } = bindActionCreators(supportActions, dispatch);
 
   return {
     onClose() {
-      props.history.goBack();
+      props.history.pop();
     },
     viewLog(id: string) {
       consumePromise(props.app.viewLog(id));
@@ -34,4 +34,4 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext & RouteC
   };
 };
 
-export default withAppContext(withRouter(connect(mapStateToProps, mapDispatchToProps)(Support)));
+export default withAppContext(withHistory(connect(mapStateToProps, mapDispatchToProps)(Support)));
diff --git a/gui/src/renderer/containers/WireguardKeysPage.tsx b/gui/src/renderer/containers/WireguardKeysPage.tsx
index e07e4718f2..b0c25e06a9 100644
--- a/gui/src/renderer/containers/WireguardKeysPage.tsx
+++ b/gui/src/renderer/containers/WireguardKeysPage.tsx
@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
-import { RouteComponentProps, withRouter } from 'react-router';
 import { links } from '../../config.json';
 import WireguardKeys from '../components/WireguardKeys';
 import withAppContext, { IAppContext } from '../context';
+import { IHistoryProps, withHistory } from '../lib/history';
 import { IWgKey } from '../redux/settings/reducers';
 import { IReduxState, ReduxDispatch } from '../redux/store';
 
@@ -12,9 +12,9 @@ const mapStateToProps = (state: IReduxState) => ({
   tunnelState: state.connection.status,
   windowFocused: state.userInterface.windowFocused,
 });
-const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: IHistoryProps & IAppContext) => {
   return {
-    onClose: () => props.history.goBack(),
+    onClose: () => props.history.pop(),
     onGenerateKey: () => props.app.generateWireguardKey(),
     onReplaceKey: (oldKey: IWgKey) => props.app.replaceWireguardKey(oldKey),
     onVerifyKey: (publicKey: IWgKey) => props.app.verifyWireguardKey(publicKey),
@@ -23,5 +23,5 @@ const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps
 };
 
 export default withAppContext(
-  withRouter(connect(mapStateToProps, mapDispatchToProps)(WireguardKeys)),
+  withHistory(connect(mapStateToProps, mapDispatchToProps)(WireguardKeys)),
 );