How to add link in sidebar of ant design (version >=4.20.0)

Question

I searched and tried different methods to apply links in the sidebar of ant design. But in vain. In the last version, we were applying links like this

<Menu.SubMenu key="SubMenu" icon={<SettingOutlined />}>
  <Menu.Item key="two" icon={<AppstoreOutlined />}>
    <Link to="">Navigation Two</Link>
  </Menu.Item>
</Menu.SubMenu>

But now they have changed it to function-based. Something like this

<Menu
  mode="inline"
  openKeys={openKeys}
  onOpenChange={onOpenChange}
  style={{ width: 256 }}
  items={items}
/>

Now I tried a few methods to apply links to code. But they are not working properly. If anybody can help then, please help.

antd link:https://ant.design/components/menu/

Answer 1

Well what you can do is add navigation in label key in items array and then your code will be working same as before

const items: MenuProps['items'] = [
  {
    label: 'Navigation One',
    key: 'mail',
    icon: <MailOutlined />,
  },
  {
    label: (
      <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
        Navigation Two
      </a>
    ),
    key: 'alipay',
  },
];