Menu with React Router NavLink

[vincentparrett]

Has anyone gotten the Menu component to work correctly with react-router-dom NavLink?

For some reason the menu doesn't close when clicking on a menuitem - I tried wrapping it using the technique suggested for nextjs but that didn't help.

import { forwardRef, ReactNode } from "react";
import { NavLink, NavLinkProps } from "react-router-dom";

export const MenuLink = forwardRef<HTMLAnchorElement, NavLinkProps>((props, ref) => {
  let { to, children, className } = props;
  return (
    <li>
      <NavLink ref={ref} to={to} className={className}>
        {children}
      </NavLink>
    </li>
  );
});

<Menu.Item>
  {({ active }) => (
    <MenuLink to="/cart" className={classNames(active ? "bg-gray-100" : "", "block px-4 py-2 text-sm text-gray-700")}>
      Cart
    </MenuLink>
  )}
</Menu.Item>

I also found the menu would not close at all when used with a Transition as shown in the examples (I literally copied and pasted the example at first).

Any ideas?

[meetbryce]

I came across the same issue and was able to solve the problem by wrapping the NavLink around the Menu.Item and moving my tailwind classes accordingly

<NavLink
    to="/pipelines/new"
    className={({ isActive }) => isActive ? activeClasses : inactiveClasses}
>
    <Menu.Item as="div" className="flex w-full px-4 py-2 text-sm">
        <PlusIcon className="w-4 h-4 mt-0.5 mr-2" />
        New pipeline
    </Menu.Item>
</NavLink>