Migrated to react-router-dom v6

src/menu/top_bar.tsx

@@ -8,7 +8,7 @@ import {MenuType} from './menu_item';
 import {SearchBar} from './search';
 import {UploadMenu} from './upload_menu';
 import {UrlMenu} from './url_menu';
-import {useHistory, useLocation} from 'react-router';
+import {useNavigate, useLocation} from 'react-router';
 import {WikiTreeLoginMenu, WikiTreeMenu} from './wikitree_menu';
 
 enum ScreenSize {
@@ -39,7 +39,7 @@ interface Props {
 }
 
 export function TopBar(props: Props) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   function changeView(view: string) {
@@ -47,7 +47,7 @@ export function TopBar(props: Props) {
     if (search.view !== view) {
       search.view = view;
       location.search = queryString.stringify(search);
-      history.push(location);
+      navigate(location);
     }
   }
 

src/menu/upload_menu.tsx

@@ -5,7 +5,7 @@ import {Dropdown, Icon, Menu} from 'semantic-ui-react';
 import {FormattedMessage} from 'react-intl';
 import {MenuType} from './menu_item';
 import {SyntheticEvent} from 'react';
-import {useHistory, useLocation} from 'react-router';
+import {useNavigate, useLocation} from 'react-router';
 import {loadFile} from '../datasource/load_data';
 
 function isImageFileName(fileName: string) {
@@ -19,7 +19,7 @@ interface Props {
 
 /** Displays and handles the "Open file" menu. */
 export function UploadMenu(props: Props) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   async function handleUpload(event: SyntheticEvent<HTMLInputElement>) {
@@ -54,13 +54,18 @@ export function UploadMenu(props: Props) {
     // Use history.replace() when reuploading the same file and history.push() when loading
     // a new file.
     const search = queryString.parse(location.search);
-    const historyPush = search.file === hash ? history.replace : history.push;
+    const replace = search.file === hash;
 
-    historyPush({
-      pathname: '/view',
-      search: queryString.stringify({file: hash}),
-      state: {data: gedcom, images},
-    });
+    navigate(
+      {
+        pathname: '/view',
+        search: queryString.stringify({file: hash}),
+      },
+      {
+        replace,
+        state: {data: gedcom, images},
+      },
+    );
   }
 
   const content = (

src/menu/url_menu.tsx

@@ -4,7 +4,7 @@ import {Button, Form, Header, Icon, Input, Modal} from 'semantic-ui-react';
 import {FormattedMessage} from 'react-intl';
 import {MenuItem, MenuType} from './menu_item';
 import {useEffect, useRef, useState} from 'react';
-import {useHistory} from 'react-router';
+import {useNavigate} from 'react-router';
 
 interface Props {
   menuType: MenuType;
@@ -15,7 +15,7 @@ export function UrlMenu(props: Props) {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [url, setUrl] = useState('');
   const inputRef = useRef<Input>(null);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (dialogOpen) {
@@ -29,7 +29,7 @@ export function UrlMenu(props: Props) {
     setDialogOpen(false);
     if (url) {
       analyticsEvent('url_selected');
-      history.push({
+      navigate({
         pathname: '/view',
         search: queryString.stringify({url}),
       });

src/menu/wikitree_menu.tsx

@@ -5,7 +5,7 @@ import {Button, Form, Header, Input, Modal} from 'semantic-ui-react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {MenuItem, MenuType} from './menu_item';
 import {useEffect, useRef, useState} from 'react';
-import {useHistory, useLocation} from 'react-router';
+import {useNavigate, useLocation} from 'react-router';
 import {getLoggedInUserName, navigateToLoginPage} from 'wikitree-js';
 
 interface Props {
@@ -17,7 +17,7 @@ export function WikiTreeMenu(props: Props) {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [wikiTreeId, setWikiTreeId] = useState('');
   const inputRef = useRef<Input>(null);
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   useEffect(() => {
@@ -37,7 +37,7 @@ export function WikiTreeMenu(props: Props) {
     const search = queryString.parse(location.search);
     const standalone =
       search.standalone !== undefined ? search.standalone : true;
-    history.push({
+    navigate({
       pathname: '/view',
       search: queryString.stringify({
         indi: wikiTreeId,