对菜单进行数据整理
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['items'][number];
// 登陆之后就请求菜单，进行渲染
const items: menuitem[] = [
{
key: '/page1',
icon: ,
label: 'option 1',
},
{
key: '/page2',
icon: ,
label: 'option 2',
},
{
key: '/page3',
icon: ,
label: 'user',
children: [
{
key: '/page3/1',
label: 'tom',
},
{
key: '/page3/2',
label: 'bill',
},
{
key: '/page3/3',
label: 'alex',
}
]
},
{
key: '/page4',
icon: ,
label: 'team',
children: [
{
key: '/page4/1',
label: 'team',
},
{
key: '/page4/2',
label: 'team',
}
]
},
{
key: '/page5',
icon: ,
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 (
theme="dark"
defaultselectedkeys={['/page1']}
// 处理菜单展开和回收的方法
onopenchange={handleoopenchange}
mode="inline"
// items 就是菜单项的数据
items={items}
onclick={menuclick}
// 当前菜单展开项的key数组
openkeys={openkeys}
/>
)
}
export default comp; 配置了栏目3里面的一个/page3/1 页面的跳转
访问其他路径的时候直接重定向到凯发真人娱乐首页
默认选中当前菜单，这个需要引入uselocation
定义一个对象currentroute
修改选中的key为currentroute的pathname参数。
这样就可以刷新的时候也在当前的选中的菜单那里了。以下是currentroute的属性。
