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

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

组件

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

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

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

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

我来解答赞 7 收藏

反馈

1 条解答

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