Ant Design - 以编程方式从 Menu.Item 取消选择/删除活动状态

Question

以下情况：

带有{LOGO - AntMenu [水平] - 其他东西}的顶部菜单。

徽标重定向到主页，而每个 Menu.Item 重定向到应用程序的另一个页面。

当前行为：如果我单击其中一个 Menu.Item，相对路径将被正确激活（我使用反应路由器链接）并且“活动”效果将应用于相关的 Menu.Item。

但是，如果之后我单击徽标，则“活动”效果仍保留在先前选择的项目上，并且我无法找到一种方法来以编程方式将其删除而不需要破解菜单。

我尝试将 Menu.selectedKeys 数组设置为 null 或其他值，但它会损坏并且无法在文档中看到任何其他可以提供帮助的属性。

任何想法？

Answer 1

提供数组中选定键属性的路径。如果您使用的是 React Router V5，要获取路径，您可以使用钩子或使用 withRouter 对于早期版本。

现在只有 URL 中匹配的路径名才会在侧边菜单中处于活动状态（突出显示），如果没有，则不会处于活动状态。

const location = useLocation();
const { pathname } = location;




<Menu mode="inline" theme={theme} selectedKeys={[pathname]}>
      <Menu.Item key="/home">
        <Link to="/home">
          <span>Home</span>
        </Link>
      </Menu.Item>
      <Menu.Item key="/songs">
        <Link to="/songs">
          <span>Songs</span>
        </Link>
      </Menu.Item>
<Menu>