Material-UI中MenuItem的href属性失效问题求助

Looks like the issue here is that Material-UI's MenuItem component renders a <li> element by default, which doesn't support the href attribute. That's why your onClick handler works (event handlers are valid for all DOM elements) but the href does nothing—browsers don't recognize href as a navigation attribute on list items.

Here are two straightforward fixes you can implement:

Option 1: Use component="a" on MenuItem #

You can tell MenuItem to render an <a> tag instead of a <li> by setting the component prop. This makes the href attribute work as expected, and you can still retain your custom onClick logic if needed.

Update the MenuItem section in your MenuButton.js to this:

<MenuItem 
  component="a"
  href={item.href} 
  key={item.href} 
  onClick={(e) => {
    item.onClick?.(e); // Call the item's custom onClick if it exists
    handleClose(); // Close the menu after navigation
  }}
>
  {item.name}
</MenuItem>

Key Notes: #

• Adding component="a" converts the MenuItem to a native anchor tag, which natively supports href for navigation.
• We wrap the onClick handler to first execute your custom logic (if present) and then close the menu—this ensures both actions work seamlessly.
• The optional chaining (item.onClick?.(e)) prevents errors for menu items that don't have an onClick defined.

Option 2: Use React Router's Link (for Single Page Apps) #

If you're using React Router for client-side routing, it's better to use the Link component instead of raw anchor tags to avoid full page reloads.

First, ensure react-router-dom is installed, then modify the MenuItem like this:

import { Link } from 'react-router-dom';

// ... inside the Menu map
<MenuItem 
  component={Link}
  to={item.href} 
  key={item.href} 
  onClick={(e) => {
    item.onClick?.(e);
    handleClose();
  }}
>
  {item.name}
</MenuItem>

Key Notes: #

• Replace href with to—this is the prop React Router's Link uses for navigation paths.
• This preserves smooth SPA navigation without triggering full page refreshes.

Why Your Original Code Failed #

The default MenuItem is a <li> element. While you can add an href attribute to it, browsers ignore this because list items aren't designed for navigation. Your onClick worked because event handlers are supported on all DOM elements, but the href was never interpreted as a navigation command.

Here's the full updated MenuButton.js with Option 1 implemented:

import React from "react";
import { Button, Menu, MenuItem } from "@material-ui/core";
const MenuButton = ({ menu }) => {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };
  if(menu.menuItems == null){
    return (
      <>
        <Button aria-controls={`${menu.name}-menu`} aria-haspopup="true" href={menu.href} onClick={handleClick} >
          {menu.name}
        </Button>
      </>
    );
  } else {
    return (
      <>
        <Button aria-controls={`${menu.name}-menu`} aria-haspopup="true" onClick={handleClick} >
          {menu.name}
        </Button>
        <Menu id={`${menu.name}-menu`} anchorEl={anchorEl} getContentAnchorEl={null} keepMounted open={Boolean(anchorEl)} onClose={handleClose} >
          {menu.menuItems.map((item) => (
            <MenuItem 
              component="a"
              href={item.href} 
              key={item.href} 
              onClick={(e) => {
                item.onClick?.(e);
                handleClose();
              }}
            >
              {item.name}
            </MenuItem>
          ))}
        </Menu>
      </>
    );
  }
};
export default MenuButton;

内容的提问来源于stack exchange，提问作者pierceyb0y