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; -};