Ant Design Menu组件无法高亮当前页面对应导航菜单项问题

架构老林

2026-10-10

问题原因

你的实现逻辑存在两个核心问题：

选中状态存在组件内部的useState中，当页面刷新、用户直接通过地址栏访问子路由、或从其他入口跳转至对应页面时，state会重置为初始空值，无法和当前页面路由同步
同时给Menu组件传入了defaultSelectedKeys和受控属性selectedKeys，defaultSelectedKeys仅在非受控模式下生效，你这里用受控模式的话该属性完全无效

解决方案

直接将Menu的选中状态和Next.js的当前路由绑定，不需要手动维护选中的key：

用Next.js提供的useRouter钩子获取当前页面的路由路径
将每个Menu.Item的key设置为对应跳转的路由路径，直接用路由路径作为选中匹配值
移除冗余的state和点击更新逻辑，路由变化时选中状态会自动同步

修改后的完整代码

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

const { Sider } = Layout;

const SideNav = () => {
    const router = useRouter()

    return (
        <Sider collapsible>
            <Menu className="menu-item"
                selectedKeys={[router.pathname]}
                selectable={true}
                mode="inline" >
                <Menu.Item key="/" icon="">
                    <Link href="/"><a>Home</a></Link>
                </Menu.Item>
                <Menu.Item key="/about" icon="">
                    <Link href="/about"><a>About me</a></Link>
                </Menu.Item>
                <Menu.Item key="/team" icon="">
                    <Link href="/team"><a>Team</a></Link>
                </Menu.Item>
                <Menu.Item key="/blog" icon="">
                    <Link href="/blog"><a>Blog</a></Link>
                </Menu.Item>
            </Menu>
        </Sider>
    )
}

export default SideNav;