Dropdown Menu doesn't close on link click when using React Router <Link> tags in place of <a> tags

[sarahbwalsh]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.1

What browser are you using?

Chrome, Firefox

When using React Router v6.4, <a href=''/"> tags are replaced with <Link to=''/"> tags, causing the Dropdown Menu component to no longer close the menu on link click.

works as expected (menu closes on link click):
<MenuItem><a href='/link'>Click here</a></MenuItem>

does not work as expected (menu does not close on link click):
<MenuItem><Link to='/link'>Click here</Link></MenuItem>

I attempted to modify the Next.js workaround by replacing the Next.js syntax/properties with those from React Router, but it still does work:

import { forwardRef } from 'react'
import Link from 'react-router-dom'
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'

const MyLink = forwardRef((props, ref) => {
  let { href, children, ...rest } = props
  return (
    <Link to={href}>
      <a ref={ref} {...rest}>
        {children}
      </a>
    </Link>
  )
})

function Example() {
  return (
    <Menu>
      <MenuButton>My account</MenuButton>
      <MenuItems anchor="bottom">
        <MenuItem>
          <MyLink href="/settings">Settings</MyLink>
        </MenuItem>
      </MenuItems>
    </Menu>
  )
}

I've also found a couple issues reported for Vue.js router-link (#143 and #2546) but I'm not familiar enough with Vue to try to translate the workarounds mentioned to React. Is there a solution for getting React Router links to close the Dropdown Menu on click, ideally one that won't re-render the whole page?

[sarahbwalsh]

Resolved