diff --git a/interface/src/app/settings/network/Network.tsx b/interface/src/app/settings/network/Network.tsx
index e7af6ef20..9f4a60b12 100644
--- a/interface/src/app/settings/network/Network.tsx
+++ b/interface/src/app/settings/network/Network.tsx
@@ -1,9 +1,16 @@
import { useCallback, useState } from 'react';
-import { Navigate, Route, Routes, useNavigate } from 'react-router';
+import {
+ Navigate,
+ Route,
+ Routes,
+ matchRoutes,
+ useLocation,
+ useNavigate
+} from 'react-router';
import { Tab } from '@mui/material';
-import { RouterTabs, useLayoutTitle, useRouterTab } from 'components';
+import { RouterTabs, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import type { WiFiNetwork } from 'types';
@@ -15,7 +22,13 @@ const Network = () => {
const { LL } = useI18nContext();
useLayoutTitle(LL.NETWORK(0));
- const { routerTab } = useRouterTab();
+ // this also works!
+ // const routerTab = useMatch(`settings/network/:path/*`)?.pathname || false;
+ const matchedRoutes = matchRoutes( [
+ { path: '/settings/network/settings', element: , dog: 'woof' },
+ { path: '/settings/network/scan', element: }
+ ], useLocation());
+ const routerTab = matchedRoutes?.[0].route.path || false;
const navigate = useNavigate();
@@ -24,7 +37,7 @@ const Network = () => {
const selectNetwork = useCallback(
(network: WiFiNetwork) => {
setSelectedNetwork(network);
- void navigate('/settings');
+ void navigate('/settings/network/settings');
},
[navigate]
);
@@ -42,16 +55,16 @@ const Network = () => {
}}
>
-
+
} />
} />
- } />
+ }
+ />
);
diff --git a/interface/src/app/settings/security/Security.tsx b/interface/src/app/settings/security/Security.tsx
index b48b211a7..0bfc6d8f4 100644
--- a/interface/src/app/settings/security/Security.tsx
+++ b/interface/src/app/settings/security/Security.tsx
@@ -1,8 +1,14 @@
-import { Navigate, Route, Routes } from 'react-router';
+import {
+ Navigate,
+ Route,
+ Routes,
+ matchRoutes,
+ useLocation
+} from 'react-router';
import { Tab } from '@mui/material';
-import { RouterTabs, useLayoutTitle, useRouterTab } from 'components';
+import { RouterTabs, useLayoutTitle } from 'components';
import { useI18nContext } from 'i18n/i18n-react';
import ManageUsers from './ManageUsers';
@@ -12,7 +18,14 @@ const Security = () => {
const { LL } = useI18nContext();
useLayoutTitle(LL.SECURITY(0));
- const { routerTab } = useRouterTab();
+ const matchedRoutes = matchRoutes(
+ [
+ { path: '/settings/security/settings', element: , dog: 'woof' },
+ { path: '/settings/security/users', element: }
+ ],
+ useLocation()
+ );
+ const routerTab = matchedRoutes?.[0].route.path || false;
return (
<>
@@ -26,7 +39,7 @@ const Security = () => {
} />
} />
- } />
+ } />
>
);
diff --git a/interface/src/components/routing/index.ts b/interface/src/components/routing/index.ts
index 84e2c217b..db622f2c3 100644
--- a/interface/src/components/routing/index.ts
+++ b/interface/src/components/routing/index.ts
@@ -2,5 +2,3 @@ export { default as RouterTabs } from './RouterTabs';
export { default as RequireAdmin } from './RequireAdmin';
export { default as RequireAuthenticated } from './RequireAuthenticated';
export { default as RequireUnauthenticated } from './RequireUnauthenticated';
-
-export * from './useRouterTab';
diff --git a/interface/src/components/routing/useRouterTab.ts b/interface/src/components/routing/useRouterTab.ts
deleted file mode 100644
index 865c3c28e..000000000
--- a/interface/src/components/routing/useRouterTab.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { useMatch, useResolvedPath } from 'react-router';
-
-export const useRouterTab = () => {
- const routerTabPathMatch = useMatch(useResolvedPath(':tab').pathname);
- const routerTab = routerTabPathMatch?.params?.tab || false;
-
- return { routerTab } as const;
-};