diff --git a/public/app/features/data-connections/DataConnectionsPage.test.tsx b/public/app/features/data-connections/DataConnectionsPage.test.tsx
index 3498905301f..515b3dd0e47 100644
--- a/public/app/features/data-connections/DataConnectionsPage.test.tsx
+++ b/public/app/features/data-connections/DataConnectionsPage.test.tsx
@@ -8,7 +8,7 @@ import { configureStore } from 'app/store/configureStore';
 
 import DataConnectionsPage from './DataConnectionsPage';
 import navIndex from './__mocks__/store.navIndex.mock';
-import { ROUTE_BASE_ID } from './constants';
+import { ROUTE_BASE_ID, ROUTES } from './constants';
 
 const renderPage = (path = `/${ROUTE_BASE_ID}`): RenderResult => {
   // @ts-ignore
@@ -39,4 +39,12 @@ describe('Data Connections Page', () => {
 
     expect(await screen.findByText('The list of data sources is under development.')).toBeVisible();
   });
+
+  test('renders the correct tab even if accessing it with a "sub-url"', async () => {
+    renderPage(`${ROUTES.Plugins}/foo`);
+
+    // Check if it still renders the plugins tab
+    expect(await screen.findByText('The list of plugins is under development')).toBeVisible();
+    expect(screen.queryByText('The list of data sources is under development.')).not.toBeInTheDocument();
+  });
 });
diff --git a/public/app/features/data-connections/DataConnectionsPage.tsx b/public/app/features/data-connections/DataConnectionsPage.tsx
index 0cf34e69871..766e6591e9c 100644
--- a/public/app/features/data-connections/DataConnectionsPage.tsx
+++ b/public/app/features/data-connections/DataConnectionsPage.tsx
@@ -17,9 +17,9 @@ export default function DataConnectionsPage(): React.ReactElement | null {
     <Page navModel={navModel}>
       <Page.Contents>
         <Switch>
-          <Route exact path={ROUTES.Plugins} component={Plugins} />
-          <Route exact path={ROUTES.CloudIntegrations} component={CloudIntegrations} />
-          <Route exact path={ROUTES.RecordedQueries} component={RecordedQueries} />
+          <Route path={ROUTES.Plugins} component={Plugins} />
+          <Route path={ROUTES.CloudIntegrations} component={CloudIntegrations} />
+          <Route path={ROUTES.RecordedQueries} component={RecordedQueries} />
 
           {/* Default page */}
           <Route component={DataSources} />
diff --git a/public/app/features/data-connections/hooks/useNavModel.ts b/public/app/features/data-connections/hooks/useNavModel.ts
index b030c3e0b66..598f7a87e3f 100644
--- a/public/app/features/data-connections/hooks/useNavModel.ts
+++ b/public/app/features/data-connections/hooks/useNavModel.ts
@@ -16,7 +16,7 @@ export const useNavModel = () => {
 
   main.children = main.children?.map((item) => ({
     ...item,
-    active: item.url === pathname,
+    active: pathname.startsWith(item.url || ''),
   }));
 
   return {