Material UI Tabs 搭配 Next.js Link 组件使用时功能异常如何解决？

MUI 的 Tabs 组件默认会直接遍历一级子节点获取 Tab 组件的索引、值等属性，用来控制选中状态、底部指示器定位和切换逻辑。你在 Tab 外层嵌套了 Next.js 的 Link 组件后，Tabs 的直接子节点变成了 Link，无法识别到内部的 Tab 组件，因此相关功能全部失效。

不需要用 Link 包裹 Tab，直接通过 Tab 组件的 component 属性指定渲染为 Next.js 的 Link 即可，这是 MUI 官方推荐的自定义组件渲染的写法。

适配 Next.js 13+ App Router 版本代码示例 #

<Tabs
  value={value}
  onChange={handleChange}
  sx={{
    marginLeft: "auto",
    marginRight: "auto",
  }}
  centered
  textColor='primary'
  indicatorColor='primary'>
  {routes.map((route, index) => (
    <StyledTab 
      key={index} 
      label={route.name} 
      component={Link}
      href={route.url}
    />
  ))}
</Tabs>

适配 Next.js 12 及更早 Page Router 版本代码示例 #

需要额外加 passHref 属性保证链接属性正确传递：

<Tabs
  value={value}
  onChange={handleChange}
  sx={{
    marginLeft: "auto",
    marginRight: "auto",
  }}
  centered
  textColor='primary'
  indicatorColor='primary'>
  {routes.map((route, index) => (
    <StyledTab 
      key={index} 
      label={route.name} 
      component={Link}
      href={route.url}
      passHref
    />
  ))}
</Tabs>

可以将 Tabs 的 value 与当前页面路径绑定，比如用 Next.js 提供的 usePathname 钩子获取当前访问路径，匹配到对应路由的索引作为 value 取值，这样直接访问子路由、页面刷新时，Tabs 的选中状态也能和当前页面自动匹配，不需要手动点击切换。

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