对菜单进行数据整理
import {
DesktopOutlined,
FileOutlined,
PieChartOutlined,
TeamOutlined,
UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import React, { useState } from 'react';
import { Menu } from 'antd';
import { To, useNavigate } from 'react-router-dom';
type MenuItem = Required<MenuProps>['items'][number];
// 登陆之后就请求菜单,进行渲染
const items: MenuItem[] = [
{
key: '/page1',
icon: <PieChartOutlined />,
label: 'Option 1',
},
{
key: '/page2',
icon: <DesktopOutlined />,
label: 'Option 2',
},
{
key: '/page3',
icon: <UserOutlined />,
label: 'User',
children: [
{
key: '/page3/1',
label: 'Tom',
},
{
key: '/page3/2',
label: 'Bill',
},
{
key: '/page3/3',
label: 'Alex',
}
]
},
{
key: '/page4',
icon: <TeamOutlined />,
label: 'Team',
children: [
{
key: '/page4/1',
label: 'Team',
},
{
key: '/page4/2',
label: 'Team',
}
]
},
{
key: '/page5',
icon: <FileOutlined />,
label: 'Files'
}
]
// 组件内部
const Comp: React.FC = () => {
const navigateTo = useNavigate();
const menuClick = (e: { key: String }) => {
console.log('点击了菜单', e.key);
// 点击菜单就跳转到对应的路由 编程式导航跳转,利用到一个Hook
navigateTo(e.key as To)
}
const [openKeys, setOpenKeys] = useState(['']);
const handleoOpenChange = (keys: string[]) => {
// keys是一个数组,记录了当前哪一项是展开的,使用key来进行记录
// 展开才菜单的时候就会执行这里的代码
// 把这个数组修改为最后一项,因为只要一项是展开的,就是我刚刚点击的那一项
setOpenKeys([keys[keys.length - 1]])
console.log("@展开的项" + keys);
}
return (
<Menu
theme="dark"
defaultSelectedKeys={['/page1']}
// 处理菜单展开和回收的方法
onOpenChange={handleoOpenChange}
mode="inline"
// items 就是菜单项的数据
items={items}
onClick={menuClick}
// 当前菜单展开项的key数组
openKeys={openKeys}
/>
)
}
export default Comp;
配置了栏目3里面的一个/page3/1 页面的跳转
访问其他路径的时候直接重定向到首页
标签:10,菜单,const,label,React,key,import,page3 From: https://www.cnblogs.com/hg-blogs/p/16973533.html