Ant Design - Deselect/Remove active status from Menu.Item programmatically

Question

Following situation:

A top menu with {LOGO - AntMenu [Horizontal] - Other stuff}.

The logo redirects to the HomePage, while each Menu.Item redirects to another page of the app.

Current behavior: If I click on one of the Menu.Item, the relative route gets properly activated (I use a react-router Link) AND the "Active" effect gets applied to the related Menu.Item.

However, if after that I click the LOGO then the "Active" effect remains on the previously selected Item and I cannot find a way to programmatically remove it without hacking the menu.

I've tried setting the Menu.selectedKeys array to null or something else, but it breaks and can't see any other property on the doc that can help.

Any Idea?

Answer 1

Provide path to selected keys prop in an array. To get path if you are using react router V5 you can use hooks or use withRouter for earlier versions.

Now only the matched pathname in URL will be active(highlighted) in side menu, if it didn't then it wont be active.

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>