React Router Dom结合Material UI Tabs时激活标签不高亮问题排查

核心原因 #

你用React.Fragment包裹了Tab组件，导致Material UI的Tabs无法直接识别子元素中的Tab及其value属性，只能默认使用索引作为可选值，因此传入的路径值无法匹配，出现报错和高亮失效。

修复步骤 #

1. 移除不必要的React.Fragment #

修改MyTabs组件的渲染逻辑，直接返回Tab组件，去掉外层无意义的Fragment：

import React from 'react';
import { jsx} from '@emotion/react';
import { Tabs, Tab } from '@material-ui/core';
import { Link } from 'react-router-dom';

const MyTabs = ({ items, value }: Props) => {
  return items.length ? (
    <Tabs
      value={value}
      orientation="horizontal"
      variant="scrollable"
      scrollButtons="off"
    >
      {items.map((item) => {
        console.log(value); // 可保留或直接删除
        return (
          <Tab
            key={item.title}
            label={item.title}
            value={item.url}
            to={item.url}
            component={Link}
            disableRipple
          />
        );
      })}
    </Tabs>
  ) : null;
};

export default MyTabs;

2. 确保路径完全匹配 #

检查item.url与location.pathname是否完全一致，注意尾斜杠（如/topics和/topics/是不同路径）、大小写差异。可统一格式化路径：
在Menu组件中处理路径：

/** @jsx jsx */
import { jsx } from '@emotion/react';
import { useLocation } from 'react-router-dom';
import MyTabs from 'app/components/MyTabs';

const Menu = ({ data }: Props) => {
  const location = useLocation();
  // 移除尾斜杠，统一路径格式
  const currentPath = location.pathname.replace(/\/$/, '');

  return data.menu.items?.length ? (
    <MyTabs menuItems={data.menu.items} value={currentPath} />
  ) : null;
};

export default Menu;

3. 处理无匹配路径的情况 #

如果当前路径不在菜单列表中，Tabs会再次报错，可添加默认值处理：
在MyTabs组件中：

const MyTabs = ({ items, value }: Props) => {
  // 检查当前路径是否在菜单中，不存在则使用第一个菜单的路径
  const validValue = items.some(item => item.url === value) 
    ? value 
    : items[0]?.url || '';

  return items.length ? (
    <Tabs
      value={validValue}
      orientation="horizontal"
      variant="scrollable"
      scrollButtons="off"
    >
      {items.map((item) => (
        <Tab
          key={item.title}
          label={item.title}
          value={item.url}
          to={item.url}
          component={Link}
          disableRipple
        />
      ))}
    </Tabs>
  ) : null;
};

验证 #

完成上述修改后，Tabs能正确识别每个Tab的value属性，传入的路径值会与对应Tab的value匹配，激活标签即可正常高亮，控制台报错也会消失。

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