Ant Design的Menu组件怎么让选中的项保持高亮？

嘉俊~ 提问于 2026-01-26 20:14:21 阅读 57

组件

在用Ant Design的侧边栏Menu做页面导航时，发现选中的菜单项跳转后刷新页面就变灰了，怎么才能让当前路由对应的菜单一直保持高亮状态啊？

我试过用selectedKeys绑定当前路由路径，但页面刷新后状态就没了。代码大概是这样写的：

const [selected, setSelected] = useState(location.pathname);
...

然后菜单项设置了selectedKeys={[selected]}，但刷新后selected又变回初始值了。是不是需要和路由状态联动？或者要用location监听？

我来解答赞 7 收藏

反馈

2 条解答

南宫鑫平 Lv1

你这问题我太熟悉了，这其实是Ant Design Menu组件的一个常见坑：它默认是受控组件，但你只在组件初始化时用了一次 location.pathname，页面刷新后 React 状态重置了，当然就丢失高亮了。

关键点在于：Menu 的选中状态要始终从当前路由状态读取，而不是自己维护一份状态。

最简单的做法是别用 useState，直接把 location.pathname 或者 match.path（视你用的路由库而定）作为 selectedKeys 的值传进去就行，比如：

import { Menu } from 'antd';

import { useLocation } from 'react-router-dom';



function Sidebar() {

  const location = useLocation();

  return (

    <Menu selectedKeys={[location.pathname]} mode="inline">

      <Menu.Item key="/home">首页</Menu.Item>

      <Menu.Item key="/about">关于</Menu.Item>

    </Menu>

  );

}

这样每次组件重渲染（包括刷新）都会重新从 location.pathname 读取当前路径，高亮自然就回来了。

不过要注意两点：
1. key 必须和 location.pathname 完全匹配，比如你路由是 /user/profile，菜单项的 key 也得是 /user/profile，差个斜杠都不行；
2. 如果你用了嵌套路由（比如 /user 下面还有 /user/profile），想让父级也高亮，那得用 openKeys 配合，或者用 defaultSelectedKeys + onOpenChange 自己控制展开状态。

调试看看：刷新页面前加个 console.log(location.pathname)，确认它是不是你想要的值，有时候路由配置没对上才是根因。

2026-02-24 05:03

UX-红霞 Lv1

你这个问题确实涉及到路由状态和菜单选中状态的联动。标准写法是结合 useEffect 和 useLocation 来实现。

关键点在于：selectedKeys 要动态根据当前路由路径设置，而不是只在组件初始化时绑定一次。你可以用 useLocation 监听路由变化，然后更新 selectedKeys。

以下是完整代码示例：

import React, { useEffect, useState } from 'react';

import { Menu, Layout } from 'antd';

import { useLocation } from 'react-router-dom';



const Sider = () => {

  const [selectedKeys, setSelectedKeys] = useState([]);

  const location = useLocation();



  useEffect(() => {

    setSelectedKeys([location.pathname]);

  }, [location]);



  return (

    
      mode="inline"

      selectedKeys={selectedKeys}

      items={[

        { key: '/home', label: 'Home' },

        { key: '/about', label: 'About' }

      ]}

    />

  );

};



export default Sider;

这样写的好处是：selectedKeys 会随着路由变化实时更新，即使页面刷新也能保持正确的高亮状态。这是官方推荐的最佳实践，文档里也有类似的做法。

如果你还有其他问题，比如想加面包屑或者二级菜单，也可以基于这个逻辑扩展。不过建议先搞定基础功能再考虑复杂场景。

2026-01-28 22:00