fixed: 左侧菜单的跳转选中

This commit is contained in:
none 2023-03-21 09:48:30 +08:00
parent 5e187d248f
commit 9e3553281e

View File

@ -1,4 +1,4 @@
import React, { useEffect } from "react"; import React, { useEffect, useState } from "react";
import { Menu } from "antd"; import { Menu } from "antd";
import { useNavigate, useLocation } from "react-router-dom"; import { useNavigate, useLocation } from "react-router-dom";
import styles from "./index.module.less"; import styles from "./index.module.less";
@ -81,23 +81,30 @@ export const LeftMenu: React.FC = () => {
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
let defaultSelectedKeys: string[] = [location.pathname]; const hit = (pathname: string): string[] => {
let defaultOpenKeys: string[] = [];
if (children2Parent[location.pathname]) {
defaultOpenKeys = children2Parent[location.pathname];
}
for (let p in children2Parent) { for (let p in children2Parent) {
if (location.pathname.search(p) >= 0) { if (pathname.search(p) >= 0) {
defaultOpenKeys = children2Parent[p]; return children2Parent[p];
break;
} }
} }
return [];
};
// 默认选中的菜单
let defaultSelectedKeys: string[] = [location.pathname];
// 默认打开的子菜单
let defaultOpenKeys: string[] = hit(location.pathname);
// 选中的菜单
const [selectedKeys, setSelectedKeys] =
useState<string[]>(defaultSelectedKeys);
const onClick = (e: any) => { const onClick = (e: any) => {
navigate(e.key); navigate(e.key);
}; };
useEffect(() => {}, [location]); useEffect(() => {
setSelectedKeys([location.pathname]);
}, [location.pathname]);
return ( return (
<div className={styles["left-menu"]}> <div className={styles["left-menu"]}>
@ -124,8 +131,12 @@ export const LeftMenu: React.FC = () => {
}} }}
defaultSelectedKeys={defaultSelectedKeys} defaultSelectedKeys={defaultSelectedKeys}
defaultOpenKeys={defaultOpenKeys} defaultOpenKeys={defaultOpenKeys}
selectedKeys={selectedKeys}
mode="inline" mode="inline"
items={items} items={items}
onSelect={(data: any) => {
setSelectedKeys(data.selectedKeys);
}}
/> />
</div> </div>
); );