react-router optimizations

interface/src/app/settings/security/Security.tsx

@@ -1,31 +1,16 @@
 import { memo } from 'react';
-import { Navigate, Route, Routes, matchRoutes, useLocation } from 'react-router';
+import { Outlet, useMatch } from 'react-router';
 
 import { Tab } from '@mui/material';
 
 import { RouterTabs, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
-import ManageUsers from './ManageUsers';
-import SecuritySettings from './SecuritySettings';
-
 const Security = () => {
   const { LL } = useI18nContext();
   useLayoutTitle(LL.SECURITY(0));
 
-  const location = useLocation();
-
-  const matchedRoutes = matchRoutes(
-    [
-      {
-        path: '/settings/security/settings',
-        element: <ManageUsers />
-      },
-      { path: '/settings/security/users', element: <SecuritySettings /> }
-    ],
-    location
-  );
-  const routerTab = matchedRoutes?.[0]?.route.path || false;
+  const routerTab = useMatch('/settings/security/:tab')?.pathname || false;
 
   return (
     <>
@@ -36,14 +21,7 @@ const Security = () => {
         />
         <Tab value="/settings/security/users" label={LL.MANAGE_USERS()} />
       </RouterTabs>
-      <Routes>
-        <Route path="users" element={<ManageUsers />} />
-        <Route path="settings" element={<SecuritySettings />} />
-        <Route
-          path="*"
-          element={<Navigate replace to="/settings/security/settings" />}
-        />
-      </Routes>
+      <Outlet />
     </>
   );
 };