refactor routes

src/App.tsx

@@ -8,7 +8,7 @@ import {
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
 import { Breadcrumb, Layout, Menu, theme } from 'antd';
-import { AppRouter } from './router';
+import { AppRouter, routes, routeName } from './router';
 import PageFooter from './components/PageFooter';
 
 const { Content, Sider } = Layout;
@@ -62,17 +62,17 @@ function defSubMenu(
 }
 
 const items: MenuItem[] = [
-  defMenu('主页', 'mainpage', <DesktopOutlined />, '/'),
+  defMenu('主页', 'mainpage', <DesktopOutlined />, routes.main),
   defRootMenu('展示信息管理', 'sub1', <UserOutlined />, [
-    defSubMenu('选项1', '1', '/admin/hello1'),
+    defSubMenu('排班表管理', '1', routes.admin.dutyTable),
-    defSubMenu('选项2', '2', '/admin/hello2'),
+    defSubMenu('成员权限管理', '2', routes.admin.userControl),
-    defSubMenu('选项3', '3', '/admin/hello3'),
+    defSubMenu('值班信息管理', '3', routes.admin.dutyInfo),
   ]),
   defRootMenu('值班组长', 'sub2', <TeamOutlined />, [
     defSubMenu('选项1', '4', '/duty/hi1'),
     defSubMenu('选项2', '5', '/duty/hi2'),
   ]),
-  defMenu('关于我们', 'aboutpage', <UserOutlined />, '/about'),
+  defMenu('关于我们', 'aboutpage', <UserOutlined />, routes.about),
 ];
 
 interface BreadcrumbItem {
@@ -97,7 +97,7 @@ const AppLayout: FC<{ router: JSX.Element }> = (props) => {
   for (var i = 1; i < pathArray.length; i++) {
     currentRouteItems.push({
       href: '',
-      title: <span>{pathArray[i]}</span>,
+      title: <span>{routeName.get(pathArray[i])}</span>,
     });
   }
 

src/router.tsx

@@ -1,15 +1,36 @@
 import { Routes, Route } from 'react-router-dom';
 import Todo from './components/Todo';
 
+export const routes = {
+  main: '/',
+  about: '/about',
+  admin: {
+    dutyTable: '/admin/dutytable',
+    userControl: '/admin/usercontrol',
+    dutyInfo: '/admin/dutyinfo',
+  },
+  duty: {},
+};
+
+export const routeName = new Map<string, string>([
+  ['admin', '展示信息'],
+  ['about', '关于我们'],
+  ['duty', '值班组长'],
+  ['dutytable', '排班表'],
+  ['usercontrol', '成员权限'],
+  ['dutyinfo', '值班信息'],
+]);
+
 export const AppRouter: React.FC = () => {
   return (
     <Routes>
-      <Route path='/' element={<Todo />} />
+      <Route path={routes.main} element={<Todo />} />
-      <Route path='/admin/hello1' element={<Todo />} />
+      <Route path={routes.admin.dutyTable} element={<Todo />} />
-      <Route path='/admin/hello2' element={<Todo />} />
+      <Route path={routes.admin.userControl} element={<Todo />} />
-      <Route path='/admin/hello3' element={<Todo />} />
+      <Route path={routes.admin.dutyInfo} element={<Todo />} />
       <Route path='/duty/hi1' element={<Todo />} />
       <Route path='/duty/hi2' element={<Todo />} />
+      <Route path={routes.about} element={<Todo />} />
     </Routes>
   );
 };