React路由问题：如何根据URL哈希自动跳转至匹配的Material UI标签页？

你的问题本质是仅实现了「标签切换同步修改URL哈希」的单向逻辑，没有做「URL哈希变更反向同步标签选中状态」的反向逻辑，不需要额外配置路由规则，按以下步骤修改代码即可：

步骤1：封装哈希匹配索引方法 #

首先封装公共方法，用于根据当前URL的哈希值匹配对应标签的索引：

// 入参为location.hash，返回匹配的tab索引，无匹配返回-1
const getTabIndexByHash = (hash: string) => {
  const pureHash = hash.replace(/^#/, '')
  return tabs.findIndex(tab => tab.suburl === pureHash)
}

步骤2：调整选中值的初始状态 #

修改value状态的初始化逻辑，页面加载时优先从当前URL哈希读取对应选中的标签，避免初始渲染闪烁：

const [value, setValue] = useState(() => {
  const matchedIndex = getTabIndexByHash(location.hash)
  // 无匹配时默认选中第一个标签，可根据需求调整默认索引
  return matchedIndex >= 0 ? matchedIndex : 0
})

步骤3：监听哈希变化同步选中状态 #

添加useEffect监听location.hash的变化，当用户手动修改地址栏哈希、或者浏览器前进后退时，自动同步标签选中状态：

useEffect(() => {
  const matchedIndex = getTabIndexByHash(location.hash)
  setValue(matchedIndex >= 0 ? matchedIndex : 0)
}, [location.hash])

完整整合后的代码示例 #

import { useHistory, useLocation } from "react-router-dom";
import { useEffect, useState } from 'react';
import Tabs from '@material-ui/core/Tabs';

// 你的tabs配置示例，根据你的实际配置调整
const tabs = [
  { suburl: 'overview', label: '概览' },
  { suburl: 'data', label: '数据' },
  { suburl: 'setting', label: '设置' },
]

export default function YourComponent() {
  const history = useHistory();
  const location = useLocation();

  const getTabIndexByHash = (hash: string) => {
    const pureHash = hash.replace(/^#/, '')
    return tabs.findIndex(tab => tab.suburl === pureHash)
  }

  const [value, setValue] = useState(() => {
    const matchedIndex = getTabIndexByHash(location.hash)
    return matchedIndex >= 0 ? matchedIndex : 0
  })

  useEffect(() => {
    const matchedIndex = getTabIndexByHash(location.hash)
    setValue(matchedIndex >= 0 ? matchedIndex : 0)
  }, [location.hash])

  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValue(newValue);
    history.replace({
      hash: `${tabs[newValue].suburl}`
    });
  };

  return (
    <Tabs
      value={value}
      onChange={handleChange}
      aria-label="Top Statistic Tabs"
    >
      {/* 你的TabHeaders渲染逻辑 */}
    </Tabs>
  )
}

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