Material UI升级后Tab点击无跳转：子组件场景无法返回根路径

问题原因 #

新版Material UI（MUI）对Tab组件做了行为优化：点击已处于选中状态的Tab时，默认不会触发onChange回调——框架认为选中状态未发生变化，无需执行状态变更逻辑，这是和旧版本的核心差异点。

恢复原有跳转行为的两种方案 #

1. 绑定onClick事件手动处理导航

不依赖onChange，直接在Tab上添加onClick回调，无论当前是否选中，都执行页面导航逻辑：

<Tab
  label="首页"
  value="/home"
  selected={currentPath === "/home"}
  onChange={handleTabChange} // 仅在切换Tab时触发状态更新
  onClick={() => {
    // 强制执行导航，恢复旧版跳转行为
    navigate("/home");
  }}
/>

2. 将Tab与路由组件结合使用

如果项目使用路由库（如react-router），可以将Tab的component属性指定为路由链接组件，利用组件本身的跳转特性实现需求：

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

<Tab
  component={Link}
  to="/home"
  label="首页"
  value="/home"
  selected={currentPath === "/home"}
/>

这种方式下，点击Tab（包括已选中的Tab）会直接触发路由跳转，同时Tab的选中状态由selected属性控制。

使用方式自查 #

旧版本中依赖onChange处理导航的逻辑在新版中不再适用，因为onChange仅在Tab选中状态发生变化时触发。如果代码完全依赖onChange实现跳转，属于适配问题，需要调整为上述两种方案之一。

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