解决Material UI Tabs在相似路由下激活状态异常问题

问题根源 #

核心问题在于路由匹配逻辑不严谨：

• 使用window.location.pathname.split('/')[2]提取路由片段的方式不可靠，不同层级的路由会导致提取结果混乱（比如/sale的split结果中索引2是undefined，/sale/shoes的索引2是shoes）
• isMainRoute函数的逻辑错误地将shoes路由映射到了sale标签的value，导致props更新后激活状态被错误覆盖

修复方案 #

1. 替换过时生命周期方法，改用可靠路由匹配

componentWillReceiveProps已被React标记为不安全，建议改用componentDidUpdate处理props更新逻辑，同时从react-router的location props中获取当前路径（而非直接读取window.location）。

2. 建立路径与标签Value的精确映射

创建路径到标签value的映射表，确保每个路由都能精准对应到正确的标签：

// 组件内部定义映射关系
const PATH_TO_TAB_VALUE = {
  '/main': 'main',
  '/sale': 'sale',
  '/sale/shoes': 'shoes'
};

3. 更新生命周期方法逻辑

// 初始化标签激活状态
componentDidMount() {
  const currentPath = this.props.location.pathname;
  const initialTabValue = PATH_TO_TAB_VALUE[currentPath];
  this.setState({ tabsValue: initialTabValue });
  this.currentRoute = initialTabValue;
}

// 处理props更新时的标签状态同步
componentDidUpdate(prevProps) {
  // 仅当路径变化时更新
  if (prevProps.location.pathname !== this.props.location.pathname) {
    const currentPath = this.props.location.pathname;
    const newTabValue = PATH_TO_TAB_VALUE[currentPath];
    
    if (this.state.tabsValue !== newTabValue) {
      this.currentRoute = newTabValue;
      this.setState({ tabsValue: newTabValue });
    }
  }
}

4. 确保组件能获取路由props

如果组件不是直接通过路由渲染的（比如作为子组件），需要用withRouter高阶组件包裹，以获取location props：

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

// 你的组件定义...

export default withRouter(YourComponentName);

5. 移除不可靠的路由提取逻辑

删除原componentWillReceiveProps中基于split('/')[2]的错误逻辑，以及isMainRoute函数（如果它的逻辑导致了错误映射）。

验证效果 #

完成以上修改后：

• 访问/main时，Main标签会正确激活
• 访问/sale时，Sale标签会正确激活
• 访问/sale/shoes时，Shoes标签会正确激活
• 切换标签时，激活状态会保持同步，不会出现错误回退的情况

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