无法在Antd menu组件中突出显示当前页面上的导航菜单

Question

我正在尝试用ant design Menu commponent突出显示我当前所在页面的导航菜单项。但事实证明，无论我在哪个页面上，菜单都不会突出显示。这是我的导航菜单代码。

import React, { useState } from "react"
import Link from "next/link"
import { Layout, Menu } from "antd";
import styles from "./sidenav.module.css"

const { Sider } = Layout;


const SideNav = () => {
    const [key, setKey] = useState("");

    const handleClick = (e) => {
        console.log(e);
        setKey(e.key)
    }

    return (
        <Sider collapsible>
            <Menu className="menu-item"
                onClick={handleClick}
                defaultSelectedKeys={['1']}
                selectedKeys={[key]}
                selectable={true}
                mode="inline" >

                <Menu.Item key="1" icon=""><Link href="/"><a>Home</a></Link></Menu.Item>
                <Menu.Item key="2" icon=""><Link href="/about"><a>About me</a></Link></Menu.Item>
                <Menu.Item key="3" icon=""><Link href="/team"><a>Team</a></Link></Menu.Item>
                <Menu.Item key="4" icon=""><Link href="/blog"><a>Blog</a></Link></Menu.Item>
            </Menu>
        </Sider>
    )

}

export default SideNav;

Answer 1

基于菜单的ant文档，onClick函数提供了这些道具{ item, key, keyPath, domEvent }。您需要对handleClick的实现进行一些调整

const SideNav = () => {
  const [key, setKey] = useState("");

  const handleClick = ({ _item, key, _keyPath, _domEvent }) => {
    console.log(key);
    setKey(key);
  };

  return (
    <Sider collapsible>
      <Menu
        className="menu-item"
        defaultSelectedKeys={["1"]}
        onClick={handleClick}
        selectedKeys={[key]}
        selectable={true}
        mode="inline"
      >
        <Menu.Item key="1" icon="">
          <Link href="/">
            <a>Home</a>
          </Link>
        </Menu.Item>
        <Menu.Item key="2" icon="">
          <Link href="/about">
            <a>About me</a>
          </Link>
        </Menu.Item>
        <Menu.Item key="3" icon="">
          <Link href="/team">
            <a>Team</a>
          </Link>
        </Menu.Item>
        <Menu.Item key="4" icon="">
          <Link href="/blog">
            <a>Blog</a>
          </Link>
        </Menu.Item>
      </Menu>
    </Sider>
  );
};

请尝试一下，如果它不能正常工作，请让我知道，解释这个问题，我会相应地更新我的答案。