Next.js 13中MUI IconButton内Link组件无法跳转问题排查

你的问题出在Next.js 13 App Router中Link组件与Material UI IconButton的配合方式上：

• 原代码里的passHref是Next.js Pages Router的用法，在App Router中已不再适用，无法正确把导航逻辑传递给子组件IconButton。
• IconButton本质是<button>元素，点击时会拦截外层Link的跳转行为，导致页面无法导航；而悬停能看到URL是因为Link渲染的包裹元素带有href属性，但点击事件未被正确关联到导航逻辑。

修复代码 #

将导航项中的Link组件替换为使用asChild属性的版本：

{navItems.map((item) => (
  <Link href={item.href} key={item.href} asChild>
    <IconButton color="primary" size='large'>
      {item.isActive(pathname) ? item.activeIcon : item.defaultIcon}
    </IconButton>
  </Link>
))}

原理说明 #

在Next.js 13 App Router中，Link的asChild属性专门用于包裹非<a>标签的交互元素（如按钮、图标按钮），它会将Link的导航逻辑注入到子组件中，确保点击子元素时触发页面跳转，这是App Router推荐的跨组件导航方式。

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