Material-UI Tabs如何使用锚点#而非斜杠/实现路由切换

问题根源说明 #

React Router 中的 <Route> 组件的 path 属性仅匹配 URL 的路径部分，锚点（hash，即#及后面的内容）属于URL的独立片段，不会被path规则识别，所以直接把/替换为#的写法无法匹配到对应路由。

完整解决方案 #

步骤1：引入所需钩子 #

从react-router-dom中引入useLocation和useHistory（v6版本替换为useNavigate），用于读取当前hash和控制路由跳转：

import { useRouteMatch, useLocation, useHistory } from 'react-router-dom';
// react-router v6 写法
// import { useMatch, useLocation, useNavigate } from 'react-router-dom';

步骤2：绑定标签激活状态与hash #

通过当前URL的hash值计算当前激活的标签索引，无匹配hash时默认选中第一个标签：

const match = useRouteMatch(); // v6 替换为 const match = useMatch('你的父路由路径');
const location = useLocation();
const history = useHistory();
// v6 替换为 const navigate = useNavigate();

// 去掉hash开头的#号
const currentTabLabel = location.hash.slice(1);
// 匹配对应标签索引，无匹配时默认选中第一个（索引为0）
const activeTabIndex = tabs.findIndex(tab => tab.label === currentTabLabel) ?? 0;

// 标签切换逻辑
const handleTabChange = (event, newIndex) => {
  const targetLabel = tabs[newIndex].label;
  history.push(`${match.url}#${targetLabel}`);
  // v6 替换为 navigate(`${match.url}#${targetLabel}`);
};

步骤3：修改标签头渲染逻辑 #

保留Link组件适配点击跳转，同时将Tabs设为受控组件绑定value和onChange：

<Tabs value={activeTabIndex} onChange={handleTabChange}>
  {tabs.map((tab, index) => (
    <Tab
      key={index.toString()}
      component={Link}
      to={`${match.url}#${tab.label}`}
      label={tab.label}
      {...a11yProps(index)}
    />
  ))}
</Tabs>

步骤4：修改标签内容渲染逻辑 #

移除不再需要的<Route>包裹，直接用MUI原生的TabPanel匹配逻辑即可：

{tabs.map((tab, index) => (
  <TabPanel key={tab.id} value={activeTabIndex} index={index}>
    {tab.children}
  </TabPanel>
))}

步骤5：父路由默认显示第一个标签（可选自动补全hash） #

如果需要进入父路由时URL自动补全第一个标签的hash，添加以下副作用即可：

useEffect(() => {
  // 无hash时自动替换为第一个标签的hash
  if (!location.hash && tabs.length > 0) {
    const firstLabel = tabs[0].label;
    history.replace(`${match.url}#${firstLabel}`);
    // v6 替换为 navigate(`${match.url}#${firstLabel}`, { replace: true });
  }
}, [location.hash, match.url, tabs, history]); // v6 把history换成navigate

注意事项 #

如果标签名包含空格、特殊字符，建议使用encodeURIComponent和decodeURIComponent对标签名做编解码处理，避免URL解析错误。

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