upgraded to latest react and react router dom versions

package.json

@@ -5,7 +5,8 @@
   "devDependencies": {
     "@playwright/test": "1.30.0",
     "@types/file-saver": "2.0.5",
-    "@types/react-dom": "17.0.2",
+    "@types/react": "18.2.74",
+    "@types/react-dom": "18.2.23",
     "@types/react-router-dom": "5.3.3",
     "@types/uuid": "^8.3.1",
     "axios": "1.3.2",
@@ -15,10 +16,10 @@
     "cra-template-typescript": "1.1.2",
     "file-saver": "^2.0.5",
     "pdbe-molstar": "3.1.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-dropdown-now": "^6.0.1",
-    "react-router-dom": "5.3.3",
+    "react-router-dom": "6.22.3",
     "react-scripts": "4.0.3",
     "simple-react-notifications2": "1.2.17",
     "typescript": "4.9.5",

src/index.tsx

@@ -1,16 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 import './styles/index.scss';
 import reportWebVitals from './reportWebVitals';
 
 import App from './ui/App';
 
-ReactDOM.render(
+const container = document.getElementById('root');
+if (!container) throw new Error('Failed to find the root element');
+const root = createRoot(container);
+root.render(
 	<BrowserRouter basename={process.env.PUBLIC_URL}>
 		<App />
-	</BrowserRouter>,
-	document.getElementById('root')
+	</BrowserRouter>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/ui/App.tsx

@@ -1,5 +1,5 @@
 import {useState} from "react";
-import {Redirect, Route, RouteComponentProps, withRouter} from "react-router-dom";
+import {useNavigate, Route, Routes} from "react-router-dom";
 import HomePage from "./pages/home/HomePage";
 import SearchResultsPage from "./pages/search/SearchResultPage";
 import APIErrorPage from "./pages/APIErrorPage";
@@ -18,13 +18,13 @@ import DownloadPage from "./pages/download/DownloadPage";
 import HelpPage from "./pages/help/HelpPage";
 import {FormData, initialFormData} from "../types/FormData";
 
-interface AppProps extends RouteComponentProps {}
 
-function App(props: AppProps) {
+export default function App() {
   const [loading, setLoading] = useState(false);
   const [formData, setFormData] = useState<FormData>(initialFormData);
   const [page, setPage] = useState<Page>(firstPage(0));
   const [searchResults, setSearchResults] = useState<MappingRecord[][][]>([]);
+  const navigate = useNavigate();
   // MappingRecord 3d array -> [][][] list of mappings/genes/isoforms
     // mappings : [
     //     ...
@@ -143,56 +143,43 @@ function App(props: AppProps) {
                 Notify.err(message.text)
             }
         });
-        props.history.push(SEARCH);
+        navigate(SEARCH);
       })
       .catch((err) => {
-        props.history.push(API_ERROR);
+        navigate(API_ERROR);
         console.log(err);
       })
       .finally(() => setLoading(false));
   }
 
   return (
-    <>
+    <Routes>
       <Route
         path={HOME}
-        exact
-        render={() => (
-          <HomePage
+        element={<HomePage
             loading={loading}
             formData={formData}
             updateAssembly={updateAssembly}
             fetchPasteResult={fetchPasteResult}
             fetchFileResult={fetchFileResult}
             searchResults={searchResults}
-          />
-        )}
-      />
+          />} />
       <Route
         path={SEARCH}
-        render={() => (
-          <SearchResultsPage
+        element={<SearchResultsPage
             rows={searchResults}
             page={page}
             formData={formData}
             fetchNextPage={fetchPage}
             loading={loading}
-          />
-        )}
-      />
-      <Route path={QUERY} render={() => <QueryPage />} />
-      <Route path={API_ERROR} render={() => <APIErrorPage />} />
-      <Route path={ABOUT} render={() => <AboutPage />} />
-      <Route path={RELEASE} render={() => <ReleasePage />} />
-      <Route path={CONTACT} render={() => <ContactPage />} />
-      <Route path={DOWNLOAD} render={() => <DownloadPage searchResults={searchResults}/>} />
-      <Route path={HELP} render={() => <HelpPage />} />
-
-        <Route exact path="/test">
-            <Redirect push to={"/test.html"} />
-        </Route>
-    </>
+          />} />
+      <Route path={QUERY} element={<QueryPage />} />
+      <Route path={API_ERROR} element={<APIErrorPage />} />
+      <Route path={ABOUT} element={<AboutPage />} />
+      <Route path={RELEASE} element={<ReleasePage />} />
+      <Route path={CONTACT} element={<ContactPage />} />
+      <Route path={DOWNLOAD} element={<DownloadPage searchResults={searchResults}/>} />
+      <Route path={HELP} element={<HelpPage />} />
+    </Routes>
   );
 }
-
-export default withRouter(App);

src/ui/layout/DefaultPageContent.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import { NavLink } from 'react-router-dom'
 import { DOWNLOAD, HOME, SEARCH } from '../../constants/BrowserPaths'
 import { MappingRecord } from '../../utills/Convertor'
@@ -8,48 +7,23 @@ const DefaultPageContent = (props: {
   downloadCount: number
   searchResults?: MappingRecord[][][]
 }) => {
-  const [enableResults, setEnableResults] = useState(false)
   const { children, downloadCount, searchResults } = props
-  useEffect(() => {
-    if (searchResults?.length) {
-      setEnableResults(true)
-    }
-  }, [searchResults])
-
   return (
     <div className="default-page-content">
       <div className="sidebar">
         <nav>
           <ul>
             <li className="sidebar-menu">
-              <NavLink to={HOME} exact activeClassName="active">
-                Search
-              </NavLink>
+              <NavLink to={HOME}>Search</NavLink>
             </li>
             <li className="sidebar-menu">
-              {enableResults ? (
-                <NavLink to={SEARCH} activeClassName="active">
-                  {' '}
-                  Results{' '}
-                </NavLink>
-              ) : (
-                <NavLink
-                  to={SEARCH}
-                  className={'disabled'}
-                >
-                  {' '}
-                  Results{' '}
-                </NavLink>
-              )}
+              {searchResults?.length ?
+                <NavLink to={SEARCH}>Results</NavLink> :
+                <NavLink to={SEARCH} className="disabled">Results</NavLink>
+              }
             </li>
             <li className="sidebar-menu">
-              <NavLink
-                to={DOWNLOAD}
-                activeClassName="active"
-              >
-                {' '}
-                My Downloads ({downloadCount})
-              </NavLink>
+              <NavLink to={DOWNLOAD}>My Downloads ({downloadCount})</NavLink>
             </li>
           </ul>
         </nav>

src/ui/pages/search/SearchResultPage.tsx

@@ -1,7 +1,7 @@
 import ResultTable from "../../components/search/ResultTable";
 import DefaultPageLayout from "../../layout/DefaultPageLayout";
 import PaginationRow from "./PaginationRow";
-import { Redirect } from 'react-router-dom'
+import { Navigate } from 'react-router-dom'
 import { NextPageFun, Page } from "../../../utills/AppHelper";
 import { MappingRecord } from "../../../utills/Convertor";
 import DownloadModal from "../../modal/DownloadModal";
@@ -27,7 +27,7 @@ function SearchResultsPageContent(props: SearchResultPageProps) {
   }, [props]);
 
   if (!rows || rows.length < 1)
-    return <Redirect to="/" />
+    return <Navigate to="/" replace />
 
   return <>
     <div className="search-results">