如何在React Material UI Tabs中同时高亮主导航父项与二级导航子项

你的问题核心是主导航的匹配逻辑是严格等于当前路径，而子路由（如/example-path/tab-two）和父路由（/example-path）不完全相等，导致父项无法高亮。只需修改主导航的匹配规则，判断当前路径是否以父路由为前缀即可实现同时高亮。

具体实现 #

1. 为主导航的Tabs组件自定义激活值，不再直接使用location.pathname，而是找出当前路径对应的父路由
2. 使用startsWith判断路径前缀，确保子路由访问时父路由仍能匹配

修改后的主导航代码示例：

// 从主导航列表中匹配当前路径对应的父路由
const activePrimaryTab = (items || []).find(item => 
  // 精确匹配父路由，或当前路径以父路由+斜杠开头（避免根路由干扰）
  location.pathname === item.url || (item.url !== '/' && location.pathname.startsWith(`${item.url}/`))
)?.url || location.pathname;

<Tabs value={activePrimaryTab}>
  {(items || []).map((item) => (
    <Tab
      key={item.url}
      label={item.title}
      value={item.url}
      href={item.url}
      disableRipple
    />
  ))}
</Tabs>

逻辑说明 #

• 当访问/example-path时，精确匹配父路由，主导航和对应的二级导航项同时高亮
• 当访问/example-path/tab-two时，通过startsWith匹配到父路由/example-path，主导航父项保持高亮，同时二级导航的/example-path/tab-two项也会正常激活

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