fix breadcrumb

src/App.tsx

@@ -1,6 +1,11 @@
 import { useState, FC } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
-import { TeamOutlined, UserOutlined, DesktopOutlined } from '@ant-design/icons';
+import {
+  TeamOutlined,
+  UserOutlined,
+  DesktopOutlined,
+  HomeOutlined,
+} from '@ant-design/icons';
 import type { MenuProps } from 'antd';
 import { Breadcrumb, Layout, Menu, theme } from 'antd';
 import { AppRouter } from './router';
@@ -63,20 +68,42 @@ function defSubMenu(
 const items: MenuItem[] = [
   defMenu('主页', '0', <DesktopOutlined />, '/', keyRouterMap),
   defRootMenu('展示信息管理', 'sub1', <UserOutlined />, [
-    defSubMenu('选项1', '1', '/hello1', keyRouterMap),
+    defSubMenu('选项1', '1', '/admin/hello1', keyRouterMap),
-    defSubMenu('选项2', '2', '/hello2', keyRouterMap),
+    defSubMenu('选项2', '2', '/admin/hello2', keyRouterMap),
-    defSubMenu('选项3', '3', '/hello3', keyRouterMap),
+    defSubMenu('选项3', '3', '/admin/hello3', keyRouterMap),
   ]),
   defRootMenu('值班组长', 'sub2', <TeamOutlined />, [
-    defSubMenu('选项1', '4', '/hi1', keyRouterMap),
+    defSubMenu('选项1', '4', '/duty/hi1', keyRouterMap),
-    defSubMenu('选项2', '5', '/hi2', keyRouterMap),
+    defSubMenu('选项2', '5', '/duty/hi2', keyRouterMap),
   ]),
 ];
 
+interface BreadcrumbItem {
+  href: string;
+  title: JSX.Element;
+}
+
 const AppLayout: FC<{ router: JSX.Element }> = (props) => {
   const [collapsed, setCollapsed] = useState(false);
   const { colorBgContainer, borderRadiusLG } = theme.getDesignToken();
   const navigate = useNavigate();
+
+  const location = useLocation();
+  const pathArray = location.pathname.split('/');
+  const currentRouteItems: BreadcrumbItem[] = [
+    {
+      href: '/',
+      title: <HomeOutlined />,
+    },
+  ];
+
+  for (var i = 1; i < pathArray.length; i++) {
+    currentRouteItems.push({
+      href: '',
+      title: <span>{pathArray[i]}</span>,
+    });
+  }
+
   return (
     <Layout style={{ minHeight: '100vh' }}>
       <Sider
@@ -98,10 +125,7 @@ const AppLayout: FC<{ router: JSX.Element }> = (props) => {
       </Sider>
       <Layout>
         <Content style={{ margin: '0 16px' }}>
-          <Breadcrumb style={{ margin: '16px 0' }}>
+          <Breadcrumb style={{ margin: '16px 0' }} items={currentRouteItems} />
-            <Breadcrumb.Item>User</Breadcrumb.Item>
-            <Breadcrumb.Item>Bill</Breadcrumb.Item>
-          </Breadcrumb>
           <div
             style={{
               padding: 24,

src/router.tsx

@@ -4,9 +4,9 @@ export const AppRouter: React.FC = () => {
   return (
     <Routes>
       <Route path='/' element={<p>Main</p>} />
-      <Route path='/hello1' element={<p>Hello1</p>} />
+      <Route path='/admin/hello1' element={<p>Hello1</p>} />
-      <Route path='/hello2' element={<p>Hello1</p>} />
+      <Route path='/admin/hello2' element={<p>Hello1</p>} />
-      <Route path='/hello3' element={<p>Hello1</p>} />
+      <Route path='/admin/hello3' element={<p>Hello1</p>} />
     </Routes>
   );
 };