MUI AppBar搭配next/link按钮点击异常：仅文字可触发导航

问题核心是当前嵌套结构限制了点击区域：Link包裹MenuItem，但MenuItem内部又嵌套了独立的<a>标签，导致只有点击<a>标签区域才会触发导航，而MenuItem的点击仅执行关闭菜单的逻辑。

下面是两种可行的修改方案，都能保留Next.js Link的预加载等特性，同时让整个MenuItem区域可点击导航：

方案一：利用MUI组件的component属性（推荐） #

通过给MenuItem设置component="a"，结合Link的passHref属性，让MenuItem直接成为Link的载体，整个区域都会触发导航：

...
<Menu
  id="menu-appbar"
  anchorEl={anchorElNav}
  anchorOrigin={{
    vertical: "bottom",
    horizontal: "left",
  }}
  open={Boolean(anchorElNav)}
  onClose={handleCloseNavMenu}
  sx={{
    display: { xs: "block", md: "none" },
  }}
>
  <Link href="/categories" passHref>
    <MenuItem onClick={handleCloseNavMenu} component="a">
      <Typography textAlign="center">Categories</Typography>
    </MenuItem>
  </Link>
...

说明： #

• passHref让Next.js Link把href传递给内部的a标签（也就是MenuItem渲染后的a标签）
• component="a"告诉MUI把MenuItem渲染为<a>标签，代替默认的<li>，这样整个MenuItem区域都属于可点击的导航元素
• onClick={handleCloseNavMenu}保留关闭菜单的逻辑，点击时同时触发导航和菜单关闭

方案二：手动通过Router跳转 #

如果不想修改MenuItem的渲染组件，可以用Next.js的useRouter钩子手动触发导航，同时保留Link的预加载特性：

import { useRouter } from 'next/router';

// 在组件内部初始化router
const router = useRouter();

// 修改菜单部分代码
...
<Menu
  id="menu-appbar"
  anchorEl={anchorElNav}
  anchorOrigin={{
    vertical: "bottom",
    horizontal: "left",
  }}
  open={Boolean(anchorElNav)}
  onClose={handleCloseNavMenu}
  sx={{
    display: { xs: "block", md: "none" },
  }}
>
  {/* 保留Link用于预加载 */}
  <Link href="/categories" prefetch>
    <MenuItem onClick={() => {
      handleCloseNavMenu();
      router.push('/categories');
    }}>
      <Typography textAlign="center">Categories</Typography>
    </MenuItem>
  </Link>
...

说明： #

• prefetch让Next.js提前预加载目标页面资源，保留Link的核心特性
• 点击MenuItem时先执行关闭菜单的逻辑，再通过router.push触发导航，整个MenuItem区域的点击都会生效

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