admin/src/layouts/AuthLayout/components/Menus.jsx

import React, { useState } from 'react';
import { useNavigate, useLocation } from "react-router-dom";
import { Menu } from 'antd';

const linkTo = url => {
  const a = document.createElement('a');
  a.href = item.key;
  a.target = '_blank';
  a.click();
}

const menuStyle = { height: '100%' };

export default (props) => {
  const { theme, items, location } = props;
  // const [selectedKeys, setSelectedKeys] = useState([]);

  const navigate = useNavigate();

  const onClick = (item) => {
    // console.log(item);

    if (item.key.indexOf('http') === 0) {
      // http 开头说明是外部链接
      linkTo(item.key);
    } else {
      // setSelectedKeys([item.key]);
      navigate(item.key);
    }
  }

  // React.useEffect(() => {
  //   if (location.pathname) {
  //     setSelectedKeys([location.pathname]);
  //   }
  // }, [location.pathname]);

  return (
    <Menu style={menuStyle} theme={theme} items={items} selectedKeys={[location.pathname]} />
  )
}