Antd菜单组件当前页面导航菜单无法高亮答案

【问题标题】：Cannot highlight the nav menu on current page in Antd menu componentAntd菜单组件当前页面导航菜单无法高亮
【发布时间】：2021-07-29 22:27:30
【问题描述】：

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

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;

【问题讨论】：

标签： reactjs menu next.js antd highlight

【解决方案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>
  );
};

请试一试，如果它不能正常工作，请告诉我，解释问题，我会相应地更新我的答案。

【讨论】：