如何处理React MUI Nav Tabs与React Router子路由值不匹配的问题？

问题原因 #

你直接将完整的location.pathname作为Tabs组件的value传入，当访问子路径时，路径值和预设的Tab的value不匹配，因此MUI会抛出非法值错误。

解决方案 #

可以通过预设合法Tab值列表+前缀匹配的方式实现需求，既不会报错，也能让对应父级Tab在访问子路径时保持高亮，修改NavBar.tsx即可：

// NavBar.tsx
import { Link, useLocation } from 'react-router-dom';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

export const NavBar = () => {
  const location = useLocation();
  // 预设所有合法的Tab value列表，新增导航时直接往这里加对应路径即可
  const validTabValues = ['/', '/about-us'];
  // 按路径长度降序排序，优先匹配更长的父路径，避免根路径/匹配所有路由
  const currentTab = validTabValues
    .sort((a, b) => b.length - a.length)
    .find(path => location.pathname.startsWith(path)) || '/';

  return (
    <Tabs value={currentTab} >
      <Tab label="Home" value="/" to="/" component={Link} />
      <Tab label="About Us" value="/about-us" to="/about-us" component={Link} />
    </Tabs>
  );
}

逻辑说明 #

• 后续新增一级导航时，只需要把对应路径加到validTabValues数组中，就能自动适配该路径下的所有子路由
• 路径排序逻辑保证了如果存在嵌套的一级导航（比如/about-us/office也作为一级Tab存在），也会优先匹配最长的对应路径，不会出现匹配错乱
• 兜底值设为/，极端情况下没有匹配到路径时也不会抛出MUI错误

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