Issues/1961 react router migration

kafka-ui-react-app/package.json

@@ -32,7 +32,7 @@
     "react-multi-select-component": "^4.0.6",
     "react-redux": "^7.2.6",
     "react-router": "^5.2.0",
-    "react-router-dom": "^5.3.1",
+    "react-router-dom": "^6.3.0",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
     "sass": "^1.43.4",

kafka-ui-react-app/src/components/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Switch, Route, useLocation } from 'react-router-dom';
+import { Routes, Route, useLocation } from 'react-router-dom';
 import { GIT_TAG, GIT_COMMIT } from 'lib/constants';
+import { clusterPath, getNonExactPath } from 'lib/paths';
 import Nav from 'components/Nav/Nav';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import Dashboard from 'components/Dashboard/Dashboard';
@@ -81,14 +82,19 @@ const App: React.FC = () => {
             aria-label="Overlay"
           />
           {areClustersFulfilled ? (
-            <Switch>
+            <Routes>
+              {['/', '/ui', '/ui/clusters'].map((path) => (
+                <Route
+                  key="Home" // optional: avoid full re-renders on route changes
+                  path={path}
+                  element={<Dashboard />}
+                />
+              ))}
               <Route
-                exact
-                path={['/', '/ui', '/ui/clusters']}
-                component={Dashboard}
+                path={getNonExactPath(clusterPath())}
+                element={<ClusterPage />}
               />
-              <Route path="/ui/clusters/:clusterName" component={ClusterPage} />
-            </Switch>
+            </Routes>
           ) : (
             <PageLoader />
           )}

kafka-ui-react-app/src/components/Brokers/Brokers.tsx

@@ -1,22 +1,22 @@
 import React from 'react';
-import { ClusterName } from 'redux/interfaces';
 import useInterval from 'lib/hooks/useInterval';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
-import { useParams } from 'react-router-dom';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import { Table } from 'components/common/table/Table/Table.styled';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import * as Metrics from 'components/common/Metrics';
 import { useAppDispatch, useAppSelector } from 'lib/hooks/redux';
+import { ClusterNameRoute } from 'lib/paths';
 import {
   fetchBrokers,
   fetchClusterStats,
   selectStats,
 } from 'redux/reducers/brokers/brokersSlice';
+import useAppParams from 'lib/hooks/useAppParams';
 
 const Brokers: React.FC = () => {
   const dispatch = useAppDispatch();
-  const { clusterName } = useParams<{ clusterName: ClusterName }>();
+  const { clusterName } = useAppParams<ClusterNameRoute>();
   const {
     brokerCount,
     activeControllers,

kafka-ui-react-app/src/components/Brokers/__test__/Brokers.spec.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import Brokers from 'components/Brokers/Brokers';
-import { render } from 'lib/testHelpers';
+import { render, WithRoute } from 'lib/testHelpers';
 import { screen, waitFor } from '@testing-library/dom';
-import { Route } from 'react-router-dom';
 import { clusterBrokersPath } from 'lib/paths';
 import fetchMock from 'fetch-mock';
 import { clusterStatsPayload } from 'redux/reducers/brokers/__test__/fixtures';
@@ -18,11 +17,11 @@ describe('Brokers Component', () => {
 
   const renderComponent = () =>
     render(
-      <Route path={clusterBrokersPath(':clusterName')}>
+      <WithRoute path={clusterBrokersPath()}>
         <Brokers />
-      </Route>,
+      </WithRoute>,
       {
-        pathname: clusterBrokersPath(clusterName),
+        initialEntries: [clusterBrokersPath(clusterName)],
       }
     );