[Menu] MenuItem does not support "to" prop.

[orangeswim]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

The following code

import { Badge, MenuItem } from "@mui/material";
import FullScreenDialog from "../pages/Credits/Credits";
import { Link } from "@tanstack/router";
//.....
<MenuItem LinkComponent={Link} to="/credits">
          Credits
        </MenuItem>

produces the following typescript error

No overload matches this call.
  Overload 1 of 3, '(props: { href: string; } & { autoFocus?: boolean | undefined; classes?: Partial<MenuItemClasses> | undefined; dense?: boolean | undefined; disabled?: boolean | undefined; disableGutters?: boolean | undefined; divider?: boolean | undefined; selected?: boolean | undefined; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error.
    Type '{ children: string; LinkComponent: LinkFn<"/", "">; to: string; }' is not assignable to type 'IntrinsicAttributes & { href: string; } & { autoFocus?: boolean | undefined; classes?: Partial<MenuItemClasses> | undefined; dense?: boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'.
      Property 'to' does not exist on type 'IntrinsicAttributes & { href: string; } & { autoFocus?: boolean | undefined; classes?: Partial<MenuItemClasses> | undefined; dense?: boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'.
  Overload 2 of 3, '(props: { component: ElementType<any>; } & { autoFocus?: boolean | undefined; classes?: Partial<MenuItemClasses> | undefined; dense?: boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>): Element | null', gave the following error.
    Property 'component' is missing in type '{ children: string; LinkComponent: LinkFn<"/", "">; to: string; }' but required in type '{ component: ElementType<any>; }'.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<MenuItemTypeMap<{}, "li">>>): Element | null', gave the following error.
    Type '{ children: string; LinkComponent: LinkFn<"/", "">; to: string; }' is not assignable to type 'IntrinsicAttributes & { autoFocus?: boolean | undefined; classes?: Partial<MenuItemClasses> | undefined; dense?: boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'.
      Property 'to' does not exist on type 'IntrinsicAttributes & { autoFocus?: boolean | undefined; classes?: Partial<MenuItemClasses> | undefined; dense?: boolean | undefined; ... 4 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Omit<...>'.

Also the menuitem API references the "component" prop while the actual code doesn't use that prop anymore. Its been replaced with LinkComponent. https://mui.com/base/react-menu/components-api/#menu-item

Current behavior 😯

Typescript is throwing an error. Adding ts-ignore to the line makes the MenuItem work.

Expected behavior 🤔

No typescript error.

Context 🔦

Create a menu item and use a routing library such as tanstack router or react-router-dom to navigate. The docs should be updated for this simple and common use case.

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 13.1
  Binaries:
    Node: 19.8.1 - ~/.nvm/versions/node/v19.8.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v19.8.1/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.2
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6 
    @emotion/styled: ^11.10.6 => 11.10.6 
    @mui/base:  5.0.0-alpha.126 
    @mui/core-downloads-tracker:  5.12.1 
    @mui/icons-material: ^5.11.16 => 5.11.16 
    @mui/material: ^5.11.15 => 5.12.1 
    @mui/private-theming:  5.12.0 
    @mui/styled-engine:  5.12.0 
    @mui/system:  5.12.1 
    @mui/types:  7.2.4 
    @mui/utils:  5.12.0 
    @types/react: ^18.0.28 => 18.0.38 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.3 => 4.9.5 

[mj12albert]

@orangeswim

Also the menuitem API references the "component" prop while the actual code doesn't use that prop anymore.

The component prop still works for the Material UI MenuItem (docs), it's only been dropped from Base UI components!

Its been replaced with LinkComponent

I think according to the code here, LinkComponent is only used as a fallback if you pass to or href without overriding the default component.

So this should work for you:

<MenuItem component={Link} to="/home">
  Home
</MenuItem>

Here's a working sandbox: https://codesandbox.io/s/https-github-com-mui-material-ui-issues-37130-fi0ybi?file=/src/App.tsx (It uses react-router-dom, I couldn't get the @tanstack/router sandbox to work 🤷‍♂️)

[moeyashi]

However, with mj12albert method, the a element is directly inside the ul element. The correct form is to include the li element inside the ul element.