Repository: provectus/kafka-ui
Issue: Redirection issue from Connector profile's path to Dashboard instead of Connectors page
Labels: type/bug
scope/frontend
status/accepted
status/confirmed
type/regression

**Describe the bug**
With click on Connectors from Connector path, system redirects to Dashboard instead of Connectors

**Set up**

https://www.kafka-ui.provectus.io/

**Steps to Reproduce**
Steps to reproduce the behavior:

1. Navigate to Kafka Connect
2. Open any Connector
3. Press on Connectors from the path

**Expected behavior**
Connectors page should open

**Screenshots**

https://user-images.githubusercontent.com/104780608/171187811-10da45ee-ba17-468a-95b6-5aaf609be1f5.mov




**Additional context**
linked to https://github.com/provectus/kafka-ui/issues/1961


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Connect/Connect.tsx b/kafka-ui-react-app/src/components/Connect/Connect.tsx
index f1bb7ef4066..c4c94227e6e 100644
--- a/kafka-ui-react-app/src/components/Connect/Connect.tsx
+++ b/kafka-ui-react-app/src/components/Connect/Connect.tsx
@@ -7,57 +7,63 @@ import {
   clusterConnectConnectorsRelativePath,
   clusterConnectorNewRelativePath,
   getNonExactPath,
+  clusterConnectorsPath,
 } from 'lib/paths';
 import { BreadcrumbRoute } from 'components/common/Breadcrumb/Breadcrumb.route';
+import useAppParams from 'lib/hooks/useAppParams';
 
 import ListContainer from './List/ListContainer';
 import NewContainer from './New/NewContainer';
 import DetailsContainer from './Details/DetailsContainer';
 import EditContainer from './Edit/EditContainer';
 
-const Connect: React.FC = () => (
-  <Routes>
-    <Route
-      index
-      element={
-        <BreadcrumbRoute>
-          <ListContainer />
-        </BreadcrumbRoute>
-      }
-    />
-    <Route
-      path={clusterConnectorNewRelativePath}
-      element={
-        <BreadcrumbRoute>
-          <NewContainer />
-        </BreadcrumbRoute>
-      }
-    />
-    <Route
-      path={clusterConnectConnectorEditRelativePath}
-      element={
-        <BreadcrumbRoute>
-          <EditContainer />
-        </BreadcrumbRoute>
-      }
-    />
-    <Route
-      path={getNonExactPath(clusterConnectConnectorRelativePath)}
-      element={
-        <BreadcrumbRoute>
-          <DetailsContainer />
-        </BreadcrumbRoute>
-      }
-    />
-    <Route
-      path={clusterConnectConnectorsRelativePath}
-      element={<Navigate to="/" replace />}
-    />
-    <Route
-      path={RouteParams.connectName}
-      element={<Navigate to="/" replace />}
-    />
-  </Routes>
-);
+const Connect: React.FC = () => {
+  const { clusterName } = useAppParams();
+
+  return (
+    <Routes>
+      <Route
+        index
+        element={
+          <BreadcrumbRoute>
+            <ListContainer />
+          </BreadcrumbRoute>
+        }
+      />
+      <Route
+        path={clusterConnectorNewRelativePath}
+        element={
+          <BreadcrumbRoute>
+            <NewContainer />
+          </BreadcrumbRoute>
+        }
+      />
+      <Route
+        path={clusterConnectConnectorEditRelativePath}
+        element={
+          <BreadcrumbRoute>
+            <EditContainer />
+          </BreadcrumbRoute>
+        }
+      />
+      <Route
+        path={getNonExactPath(clusterConnectConnectorRelativePath)}
+        element={
+          <BreadcrumbRoute>
+            <DetailsContainer />
+          </BreadcrumbRoute>
+        }
+      />
+      <Route
+        path={clusterConnectConnectorsRelativePath}
+        element={<Navigate to={clusterConnectorsPath(clusterName)} replace />}
+      />
+      <Route
+        path={RouteParams.connectName}
+        element={<Navigate to="/" replace />}
+      />
+    </Routes>
+  );
+};
 
 export default Connect;


Test patch: