Antd：如何让 SubMenu 成为可点击的链接？

Question

I'm working on a Next.js app and I'm using antd's Menu and Submenu for my NavBar, and I'm trying to figure out how to make SubMenu be a clickable link. What is the way to do this?

<Menu className={styles.menuContainer} mode={mode} dashed={false}>
    <Menu.Item key='setting:1'>
      <Link href='/About'>About</Link>
    </Menu.Item>
    // have this point to '/resources'
    <SubMenu key='SubMenu' title='Resources'>
      <Menu.Item key='setting:2'>
        <Link href='/blog'>Blog</Link>
      </Menu.Item>
      <Menu.Item key='setting:3'>
        <Link href='/faq'>FAQ</Link>
      </Menu.Item>
      <Menu.Item key='setting:4'>
        <Link href='/events'>
          Events
        </Link>
      </Menu.Item>
    </SubMenu>
  </Menu>

Answer 1

You have to use to="#" instead of href="#" when linking. As follows:

<Link to='/about'>About</Link>

Answer 2

You can try this attribute

<Link href='/About' passHref><a>About</a></Link>