Update react-router-dom to its latest version and use the new API (mo…

…zilla#578) * Update to latest version of react-router-dom v6 * Switch to the new API for react-router-dom
esanuandra · Nov 22, 2023 · 08d2c3d · 08d2c3d
1 parent 8d74d6d
commit 08d2c3d
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 43 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.18.0",
     "redux": "^4.2.0",
     "run": "^1.4.0",
     "ts-node": "^10.9.1",

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -5,7 +5,12 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Link from '@mui/material/Link';
 import { ThemeProvider } from '@mui/material/styles';
 import { SnackbarProvider } from 'notistack';
-import { HashRouter as Router, Route, Routes } from 'react-router-dom';
+import {
+  createHashRouter,
+  RouterProvider,
+  createRoutesFromElements,
+  Route,
+} from 'react-router-dom';
 
 import { Strings } from '../resources/Strings';
 import { Banner } from '../styles/Banner';
@@ -42,6 +47,7 @@ function App() {
     null,
   );
   const { protocolTheme, toggleColorMode } = useProtocolTheme();
+
   return (
     <ThemeProvider theme={protocolTheme}>
       <AlertContainer ref={setAlertContainer} />
@@ -64,31 +70,35 @@ function App() {
             </div>
           </Alert>
 
-          <Router>
-            <Routes>
-              <Route
-                path='/'
-                element={
-                  <SearchView
-                    toggleColorMode={toggleColorMode}
-                    protocolTheme={protocolTheme}
-                    title={Strings.metaData.pageTitle.search}
+          <RouterProvider
+            router={createHashRouter(
+              createRoutesFromElements(
+                <>
+                  <Route
+                    path='/'
+                    element={
+                      <SearchView
+                        toggleColorMode={toggleColorMode}
+                        protocolTheme={protocolTheme}
+                        title={Strings.metaData.pageTitle.search}
+                      />
+                    }
                   />
-                }
-              />
 
-              <Route
-                path='/compare-results'
-                element={
-                  <ResultsView
-                    toggleColorMode={toggleColorMode}
-                    protocolTheme={protocolTheme}
-                    title={Strings.metaData.pageTitle.results}
+                  <Route
+                    path='/compare-results'
+                    element={
+                      <ResultsView
+                        toggleColorMode={toggleColorMode}
+                        protocolTheme={protocolTheme}
+                        title={Strings.metaData.pageTitle.results}
+                      />
+                    }
                   />
-                }
-              />
-            </Routes>
-          </Router>
+                </>,
+              ),
+            )}
+          />
         </SnackbarProvider>
       ) : null}
     </ThemeProvider>