chore: use react-router-dom-v5-compat instead of react-router and react-router-dom

Signed-off-by: Jenny Zhu <[email protected]>

Author: zhuje

web/package-lock.json

@@ -60,8 +60,6 @@
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.7.3",
     "react-redux": "7.2.2",
-    "react-router": "5.3.x",
-    "react-router-dom": "5.3.x",
     "style-loader": "^3.3.1",
     "stylelint": "^15.3.0",
     "stylelint-config-standard": "^31.0.0",
@@ -87,5 +85,8 @@
     "dependencies": {
       "@console/pluginAPI": "*"
     }
+  },
+  "dependencies": {
+    "react-router-dom-v5-compat": "^6.30.0"
   }
 }

web/package.json

@@ -26,7 +26,7 @@ import {
 } from '@patternfly/react-topology';
 import * as React from 'react';
 import { TFunction, useTranslation } from 'react-i18next';
-import { useHistory, useLocation } from 'react-router';
+import { useNavigate, useLocation } from 'react-router-dom-v5-compat';
 import { nodeToLabel } from '../../korrel8r-utils';
 import { InvalidNode } from '../../korrel8r/invalid';
 import { Korrel8rNode } from '../../korrel8r/korrel8r.types';
@@ -213,7 +213,7 @@ export const Korrel8rTopology: React.FC<{
 }> = ({ queryNodes, queryEdges, loggingAvailable, netobserveAvailable, setQuery }) => {
   const { t } = useTranslation('plugin__troubleshooting-panel-console-plugin');
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
   const persistedQuery = useSelector((state: State) => {
     return state.plugins?.tp?.get('persistedQuery');
   }) as Query;
@@ -273,9 +273,9 @@ export const Korrel8rTopology: React.FC<{
         goal: null,
         constraint: persistedQuery.constraint,
       });
-      history.push('/' + korrel8rNode.toURL());
+      navigate('/' + korrel8rNode.toURL());
     },
-    [history, nodes, selectedIds, setQuery, persistedQuery],
+    [navigate, nodes, selectedIds, setQuery, persistedQuery],
   );
 
   const controller = React.useMemo(() => {

web/src/components/topology/Korrel8rTopology.tsx

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

web/src/hooks/useQueryParams.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useQueryParams } from './useQueryParams';
 import { Korrel8rNodeFactory } from '../korrel8r/node-factory';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom-v5-compat';
 
 export type QueryParams = [string, string][];