How to make Sider selected key be responsive?

Solution 1:

There is no onClick on Menu.Item

only Menu component has onClick or onSelect, both will give you callback of the "clicked" key, the differences is onClick is for any menu item click (including expanding menu) while on select is when you select an actual menu item.

There are 2 ways to get the history string:

1 - use the history string as menuItem key: the issue would be you cannot have 2 menu item that has same history key

2 - have a map which maps the menu key to history string

see below demo: https://codesandbox.io/s/inline-menu-antd-4-18-2-forked-bgwyj?file=/index.js

      const handleOnSelect = ({ item, key, keyPath, selectedKeys, domEvent }) => {
        console.log(item);
        console.log(keyPath);
        console.log(selectedKeys);
        console.log(domEvent);
        handleSelectKey(key);
      };

...
..
<Menu
  onSelect={handleOnSelect}
...
>
...
</Menu>