Migrated to react-router-dom v6

src/app.tsx

@@ -11,11 +11,11 @@ import {IndiInfo} from 'topola';
 import {Intro} from './intro';
 import {Loader, Message, Portal, Tab} from 'semantic-ui-react';
 import {Media} from './util/media';
-import {Redirect, Route, Switch} from 'react-router-dom';
+import {Navigate, Route, Routes} from 'react-router-dom';
 import {TopBar} from './menu/top_bar';
 import {TopolaData} from './util/gedcom_util';
 import {useEffect, useState} from 'react';
-import {useHistory, useLocation} from 'react-router';
+import {useNavigate, useLocation} from 'react-router';
 import {idToIndiMap} from './util/gedcom_util';
 import {
   Chart,
@@ -229,7 +229,7 @@ export function App() {
   const [config, setConfig] = useState(DEFALUT_CONFIG);
 
   const intl = useIntl();
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
 
   /** Sets the state with a new individual selection and chart type. */
@@ -342,7 +342,7 @@ export function App() {
       const args = getArguments(location);
 
       if (!args.sourceSpec) {
-        history.replace({pathname: '/'});
+        navigate({pathname: '/'}, {replace: true});
         return;
       }
 
@@ -413,7 +413,7 @@ export function App() {
       search[key] = args[key];
     }
     location.search = queryString.stringify(search);
-    history.push(location);
+    navigate(location);
   }
 
   /**
@@ -570,45 +570,37 @@ export function App() {
 
   return (
     <>
-      <Route
-        render={() => (
-          <TopBar
-            data={data?.chartData}
-            allowAllRelativesChart={
-              sourceSpec?.source !== DataSourceEnum.WIKITREE
-            }
-            allowPrintAndDownload={chartType !== ChartType.Donatso}
-            showingChart={
-              history.location.pathname === '/view' &&
-              (state === AppState.SHOWING_CHART ||
-                state === AppState.LOADING_MORE)
-            }
-            standalone={standalone}
-            eventHandlers={{
-              onSelection,
-              onPrint,
-              onDownloadPdf,
-              onDownloadPng,
-              onDownloadSvg,
-            }}
-            showWikiTreeMenus={
-              sourceSpec?.source === DataSourceEnum.WIKITREE &&
-              showWikiTreeMenus
-            }
-          />
-        )}
+      <TopBar
+        data={data?.chartData}
+        allowAllRelativesChart={sourceSpec?.source !== DataSourceEnum.WIKITREE}
+        allowPrintAndDownload={chartType !== ChartType.Donatso}
+        showingChart={
+          location.pathname === '/view' &&
+          (state === AppState.SHOWING_CHART || state === AppState.LOADING_MORE)
+        }
+        standalone={standalone}
+        eventHandlers={{
+          onSelection,
+          onPrint,
+          onDownloadPdf,
+          onDownloadPng,
+          onDownloadSvg,
+        }}
+        showWikiTreeMenus={
+          sourceSpec?.source === DataSourceEnum.WIKITREE && showWikiTreeMenus
+        }
       />
       {staticUrl ? (
-        <Switch>
-          <Route exact path="/view" render={renderMainArea} />
-          <Redirect to={'/view'} />
-        </Switch>
+        <Routes>
+          <Route path="/view" element={renderMainArea()} />
+          <Route path="*" element={<Navigate to="/view" replace />} />
+        </Routes>
       ) : (
-        <Switch>
-          <Route exact path="/" component={Intro} />
-          <Route exact path="/view" render={renderMainArea} />
-          <Redirect to={'/'} />
-        </Switch>
+        <Routes>
+          <Route path="/" element={<Intro />} />
+          <Route path="/view" element={renderMainArea()} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
       )}
     </>
   );

src/index.tsx

@@ -43,7 +43,7 @@ if (browser && browser.name === 'ie') {
       <MediaContextProvider>
         <style>{mediaStyles}</style>
         <Router>
-          <Route component={App} />
+          <App />
         </Router>
       </MediaContextProvider>
     </IntlProvider>,

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,