React项目: 面包屑

15_React/day-7/code/my-app/src/layout/index.jsx

@@ -1,15 +1,28 @@
 import './index.css';
-import { Outlet } from 'react-router-dom';
-import { Menu, Button } from 'antd';
+import { Outlet, Link } from 'react-router-dom';
+import { Menu, Button, Space, Breadcrumb } from 'antd';
+import {
+  MenuUnfoldOutlined,
+  MenuFoldOutlined,
+  HomeOutlined,
+} from '@ant-design/icons';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
 
 export default function Layout() {
+  // 菜单收起和展开状态的数据
+  let [collapsed, setCollapsed] = useState(false);
+  // 面包屑的二级显示名称
+  let [subMenuTitle, setSubMenuTitle] = useState('');
   const items = useSelector(({ system }) => system.menus);
   const navigate = useNavigate();
-  function selectMenu({ key }) {
+  function selectMenu({ item, key }) {
+    console.log(item);
+    setSubMenuTitle(item.props.title);
     navigate(key);
   }
+
   return (
     <div className="layout">
       <aside>
@@ -23,13 +36,37 @@ export default function Layout() {
         <Menu
           defaultSelectedKeys={['/']}
           mode="inline"
-          inlineCollapsed={false}
+          inlineCollapsed={collapsed}
           items={items}
           onClick={selectMenu}
         />
       </aside>
       <main>
-        <header></header>
+        <header>
+          <Space style={{ height: '100%' }}>
+            <Button
+              ghost
+              type="text"
+              icon={
+                collapsed ? (
+                  <MenuUnfoldOutlined style={{ fontSize: '20px' }} />
+                ) : (
+                  <MenuFoldOutlined style={{ fontSize: '20px' }} />
+                )
+              }
+              onClick={() => {
+                setCollapsed(!collapsed);
+              }}
+            />
+            {/* 面包屑 */}
+            <Breadcrumb>
+              <Breadcrumb.Item href="/">
+                <HomeOutlined />
+              </Breadcrumb.Item>
+              <Breadcrumb.Item>{subMenuTitle}</Breadcrumb.Item>
+            </Breadcrumb>
+          </Space>
+        </header>
         <div className="main-page">
           <Outlet />
         </div>

15_React/day-7/code/my-app/src/router/index.js

@@ -13,7 +13,7 @@ const withSuspense = (ComP) => (
   </Suspense>
 );
 
-const router = createBrowserRouter([
+export const routes = [
   {
     path: '/',
     element: <Layout />,
@@ -21,17 +21,22 @@ const router = createBrowserRouter([
       {
         index: true,
         element: withSuspense(Home),
+        breadcrumbName: '主页',
       },
       {
         path: '/setting',
         element: withSuspense(Setting),
+        breadcrumbName: '设置',
       },
       {
         path: '/shop-list',
         element: withSuspense(ShopList),
+        breadcrumbName: '商品列表',
       },
     ],
   },
-]);
+];
+
+const router = createBrowserRouter(routes);
 
 export default router;