OU-192: replace react-router and react-router-dom with react-router-dom-compat-v5

web/package.json

@@ -65,8 +65,6 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-helmet": "^6.1.0",
-    "react-router": "5.3.x",
-    "react-router-dom": "5.3.x",
     "serve": "^14.2.3",
     "style-loader": "^3.3.1",
     "ts-jest": "^28.0.8",
@@ -108,7 +106,8 @@
     "@patternfly/react-table": "^5.4.15",
     "@patternfly/react-virtualized-extension": "^5.1.0",
     "i18next": "^22.4.12",
-    "react-i18next": "^11.18.6"
+    "react-i18next": "^11.18.6",
+    "react-router-dom-v5-compat": "^6.30.0"
   },
   "nyc": {
     "report-dir": "./coverage/cov-cypress"

web/src/components/logs-table.tsx

@@ -2,7 +2,7 @@ import { ResourceLink, RowProps, TableColumn } from '@openshift-console/dynamic-
 import { Split, SplitItem } from '@patternfly/react-core';
 import { ISortBy, SortByDirection, Td, ThProps } from '@patternfly/react-table';
 import React, { useCallback, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom-v5-compat';
 import { DateFormat, dateToFormat } from '../date-utils';
 import {
   Direction,

web/src/e2e-tests-app.tsx

@@ -1,7 +1,14 @@
 import '@patternfly/patternfly/patternfly.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter, Link, Route, useHistory, useParams } from 'react-router-dom';
+import {
+  BrowserRouter,
+  Link,
+  Route,
+  Routes,
+  useNavigate,
+  useParams,
+} from 'react-router-dom-v5-compat';
 import LogsAlertMetrics from './components/alerts/logs-alerts-metrics';
 import i18n from './i18n';
 import './index.css';
@@ -19,15 +26,15 @@ import { TestIds } from './test-ids';
 
 const DevConsole = () => {
   const { ns: namespace } = useParams<{ ns: string }>();
-  const history = useHistory();
+  const navigate = useNavigate();
   const [isOpen, setIsOpen] = React.useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);
   };
 
   const onSelectNamespace = (selectedNamespace: string) => () => {
-    history.push(`/dev-monitoring/ns/${selectedNamespace}/logs`);
+    navigate(`/dev-monitoring/ns/${selectedNamespace}/logs`);
     setIsOpen(false);
   };
 
@@ -119,23 +126,22 @@ const EndToEndTestsApp = () => {
         </div>
 
         <main className="pf-v5-c-page__main" tabIndex={-1}>
-          <Route path="/monitoring/logs">
-            <LogsPage />
-          </Route>
-          <Route path="/dev-monitoring/ns/:ns/logs">
-            <DevConsole />
-          </Route>
-          <Route path="/k8s/ns/:ns/pods/:name">
-            <LogsDetailPage />
-          </Route>
-          <Route path="/monitoring/alerts/:alertname">
-            <LogsAlertMetrics
-              rule={{
-                labels: { tenantId: 'application' },
-                query: `sum by(job)(rate({ job=~".+" }[5m])) > 0`,
-              }}
+          <Routes>
+            <Route path="/monitoring/logs" element={<LogsPage />} />
+            <Route path="/dev-monitoring/ns/:ns/logs" element={<DevConsole />} />
+            <Route path="/k8s/ns/:ns/pods/:name" element={<LogsDetailPage />} />
+            <Route
+              path="/monitoring/alerts/:alertname"
+              element={
+                <LogsAlertMetrics
+                  rule={{
+                    labels: { tenantId: 'application' },
+                    query: `sum by(job)(rate({ job=~".+" }[5m])) > 0`,
+                  }}
+                />
+              }
             />
-          </Route>
+          </Routes>
         </main>
       </BrowserRouter>
     </div>

web/src/hooks/useQueryParams.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom-v5-compat';
 
 export const useQueryParams = () => {
   const location = useLocation();