react学习笔记-6：页面布局及菜单

引入页面布局

从Ant Design网站上选择自己的布局Layout，拷贝代码放入Home.tsx中作为首页。

 增加点击事件

定义一个点击事件方法，并在Menu组件上添加该点击事件

const items: MenuItem[] = [
  getItem('栏目 1', '点击返回值1', <PieChartOutlined />),
  getItem('Option 2', '点击返回值2', <DesktopOutlined />),
  getItem('User', 'sub1', <UserOutlined />, [
    getItem('Tom', '3'),
    getItem('Bill', '4'),
    getItem('Alex', '5'),
  ]),
  getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
  getItem('Files', '9', <FileOutlined />),
];

//定义menuClick事件
  const menuClick = (e:{key:string}) => {
    console.log("点击了菜单",e.key);
  }

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 左边侧边栏 */}
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
      {/* 增加点击事件 onClick  */}
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} onClick={menuClick} />
      </Sider>

 配置页面跳转

修改Home.tsx

//引入路由跳转组件useNavigate和展示窗组件Outlet
import { Outlet,useNavigate } from 'react-router-dom';

//定义一个navigeteTO方法
const navigateTo = useNavigate()

//定义menuClick事件，获取菜单点击返回字段
  const menuClick = (e:{key:string}) => {
    console.log("点击了菜单",e.key);
    //点击跳转到对应的路由，编程式导航跳转，使用一个hook
    navigateTo(e.key)
  }

{/* 内容盒子 */}
   <div style={{ padding: 24, minHeight: 360, background: colorBgContainer }}>
     {/* 窗口部分展示 */}
     <Outlet />
    </div>

修改router/index.tsx

//定义页面的懒路由对象，分别指向page1和page2
const Page1 = lazy(()=>import ("../views/Page1"))
const Page2 = lazy(()=>import ("../views/Page2"))

const routes = [
    //嵌套路由 开始 -------
    {
        path:"/",
        element:<Navigate to='/page1' />
    },
    {
        path:"/",
        element:<Home />,
        children:[
            {
                path:"/page1",
                element:withLoadingComponent(<Page1 />)
            },
            {
                path:"/page2",
                element:withLoadingComponent(<Page2 />)
            }
        ]
    }
    //嵌套路由 结束 -------
]