如何让MUI Tab匹配多个路由（React Router v6+TS）

你的核心问题是：当跳转到/secure/userCreate时，没有对应的Tab匹配该路由，导致MUI Tabs组件报错，需要让Users Tab在/secure/users和/secure/userCreate两个路由下都保持选中状态。

解决方案：扩展路由匹配逻辑，支持多路径关联同一个Tab #

我们可以通过重构路由配置，给每个Tab绑定需要匹配的路径数组，灵活控制哪些路由对应哪个Tab的选中状态。

步骤1：重构路由配置

将原来的单一routes数组替换为包含Tab标签、对应路径和匹配路径列表的对象数组，清晰管理每个Tab关联的路由：

const tabRoutes = [
  { label: "Books", path: "/secure/books", matches: ["/secure/books"] },
  { label: "Offers", path: "/secure/offers", matches: ["/secure/offers"] },
  { label: "Products", path: "/secure/products", matches: ["/secure/products"] },
  { label: "Vacation", path: "/secure/vacation", matches: ["/secure/vacation"] },
  { label: "Others", path: "/secure/others", matches: ["/secure/others"] },
  { label: "Reports", path: "/secure/reports", matches: ["/secure/reports"] },
  { label: "Users", path: "/secure/users", matches: ["/secure/users", "/secure/userCreate"] },
];

这里给Users Tab的matches数组添加了/secure/userCreate，表示该路径也会触发Users Tab的选中状态。

步骤2：修改Navigation组件的匹配逻辑

移除原来的useRouteMatch函数，直接在组件内通过当前路径匹配对应的Tab：

export const Navigation = (): ReactElement => {
  const permission = getPermission();
  const { pathname } = useLocation();

  // 查找当前路径匹配的Tab路径
  const currentTab = tabRoutes.find(tab => 
    tab.matches.some(pattern => matchPath(pattern, pathname))
  )?.path;

  return (
    <Container style={{ marginTop: 34}}>
      <AppBar 
        position="static" 
        style= {{ background: '#FFFFFF'}}
        elevation={0}
      >
        <Container maxWidth="xl">
          <Tabs 
            value={currentTab}
            aria-label="nav tabs example"
            variant="scrollable"
            scrollButtons="auto"
            sx={{ 
              '& .MuiTab-root': {
                fontSize: 18,
                fontWeight: 600,
                lineHeight: '175%',
                letterSpacing: '0.15px',
                padding: '5px 0px 5px 0px',
                color: 'rgba(0, 54, 101, 0.6)',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'flex-start',
                marginRight: 6.25,
                minWidth: 0,
              },
              '& .MuiTabs-indicator': {
                backgroundColor: "#01A3FE",
                },
              '& .Mui-selected': {
                color: "#01A3FE !important",
              }
              }}
          >
            {tabRoutes.map(tab => {
              // 仅管理员可见Users Tab
              if (tab.label === "Users" && !permission.isAdmin) {
                return null;
              }
              return (
                <Tab 
                  key={tab.path}
                  label={tab.label} 
                  value={tab.path} 
                  to={tab.path} 
                  component={Link} 
                />
              );
            })}
            <span className="MuiTabs-indicator css-1aquho2-MuiTabs-indicator" style={{ left: 0, backgroundColor: '#EEEEEE'}}></span>
          </Tabs>
        </Container>
      </AppBar>
    </Container>
  );
}

原理说明 #

• 原来的useRouteMatch仅匹配固定的路由列表，无法处理/secure/userCreate这类关联路由，导致currentTab为null，触发Tabs组件的匹配错误。
• 新逻辑通过tabRoutes数组为每个Tab指定匹配路径集合，使用matchPath检查当前路径是否属于某个Tab的匹配列表，返回对应的Tab路径作为currentTab，确保Users Tab在两个路由下都能被正确选中。

这种方式具备可扩展性，后续给其他Tab添加关联路由时，只需在对应的matches数组中新增路径即可。

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