upgrade to react router 7

ui/src/components/menu/Menu.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Tabs, TabPane } from '@douyinfe/semi-ui';
 
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 import { IconUser, IconTerminal, IconSetting } from '@douyinfe/semi-icons';
 import './Menu.less';
 
@@ -12,15 +12,10 @@ function parsePathName(name) {
 }
 
 const TopMenu = function TopMenu({ isAdmin }) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   return (
-    <Tabs
-      className="menu"
-      type="line"
-      activeKey={parsePathName(location.pathname)}
-      onTabClick={(key) => history.push(key)}
-    >
+    <Tabs className="menu" type="line" activeKey={parsePathName(location.pathname)} onTabClick={(key) => navigate(key)}>
       <TabPane
         itemKey="/jobs"
         tab={

ui/src/components/permission/PermissionAwareRoute.jsx

@@ -1,21 +1,8 @@
 import React from 'react';
 
-import { Redirect } from 'react-router-dom';
-import { Route } from 'react-router';
+import { Navigate } from 'react-router-dom';
 
-export default function PermissionAwareRoute({ currentUser, name, path, component }) {
-  /**
-   * Checks if given component should be rendered if current user has given permission enabled. If that's not the case,
-   * user is redirected to '/403'.
-   *
-   * @param permission
-   * @param component
-   * @param path
-   * @returns {*}
-   */
-  const checkIfAdmin = (component, path) => {
-    return currentUser != null && currentUser.isAdmin ? component : <Redirect from={path} to="/403" />;
-  };
-
-  return <Route name={name} path={path} render={() => checkIfAdmin(component, path)} />;
+export default function PermissionAwareRoute({ currentUser, children }) {
+  const isAdmin = currentUser != null && currentUser.isAdmin;
+  return isAdmin ? children : <Navigate to="/403" replace />;
 }