React Router结合Material UI Tabs：直接输入路由时标签选中异常

问题：使用React、Material-UI和React-Router实现标签页导航时，应用内点击标签可正常切换页面、选中对应标签、更新URL，但直接在浏览器地址栏输入路径时，Tabs始终选中第一个标签，无法匹配当前路由。

原代码：

function App() {
  const [page, setPage] = useState("1");
  const handleChange = (e: React.SyntheticEvent, newPage: string) => {
    setPage(newPage);
  };

  return (
    <Router>
      <div className="App">
        <Header title="My Site" />
        <TabContext value={page}>
          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
            <Tabs
              aria-label="Tab navigation"
              onChange={handleChange}
              value={page}
              variant="fullWidth"
            >
              <Tab label="Tab One" component={Link} to="/pageOne" value="1" />
              <Tab label="Tab Two" component={Link} to="/pageTwo" value="2" />
              <Tab label="Tab Three" component={Link} to="/pageThree" value="3" />
              <Tab label="Tab Four" component={Link} to="/pageFour" value="4" />
            </Tabs>
          </Box>
        </TabContext>
        <Footer />

        <Routes>
          <Route
            path="/"
            element={<pageOne />}
          />
          <Route
            path="/pageOne"
            element={<pageOne />}
          />
          <Route path="/pageTwo" element={<pageTwo />} />
          <Route path="/pageThree" element={<pageThree />} />
          <Route path="/pageFour" element={<pageFour />} />
        </Routes>
      </div>
    </Router>
  );
}

问题根源：

• 本地page状态初始值固定为"1"，路由变化时未同步更新该状态，直接输入路径时组件初始化仍使用默认值，导致始终选中第一个标签。
• 直接解析window.location.href不符合React Router规范，易出现值比较异常（你遇到的引用/值比较错误就是这种方式的不稳定导致的）。

解决方案：
核心思路是让Tabs的选中状态完全由路由控制，不再依赖本地状态，确保路由变化（点击标签或直接输入路径）都能同步Tabs状态。

修改后的完整代码：

import { Router, Routes, Route, useLocation, useNavigate } from 'react-router-dom';
import { TabContext, Tabs, Tab, Box } from '@mui/material';

function App() {
  const location = useLocation();
  const navigate = useNavigate();

  // 路由路径与Tab value的映射表，统一管理对应关系
  const pathToTabValue: Record<string, string> = {
    '/': '1',
    '/pageOne': '1',
    '/pageTwo': '2',
    '/pageThree': '3',
    '/pageFour': '4'
  };

  // 根据当前路由动态获取对应Tab value
  const currentTabValue = pathToTabValue[location.pathname] || '1';

  // Tab点击事件：通过路由跳转同步状态
  const handleTabChange = (e: React.SyntheticEvent, newValue: string) => {
    const targetPath = Object.entries(pathToTabValue).find(([_, value]) => value === newValue)?.[0];
    if (targetPath) {
      navigate(targetPath);
    }
  };

  return (
    <Router>
      <div className="App">
        <Header title="My Site" />
        <TabContext value={currentTabValue}>
          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
            <Tabs
              aria-label="Tab navigation"
              onChange={handleTabChange}
              value={currentTabValue}
              variant="fullWidth"
            >
              <Tab label="Tab One" value="1" />
              <Tab label="Tab Two" value="2" />
              <Tab label="Tab Three" value="3" />
              <Tab label="Tab Four" value="4" />
            </Tabs>
          </Box>
        </TabContext>
        <Footer />

        <Routes>
          <Route path="/" element={<pageOne />} />
          <Route path="/pageOne" element={<pageOne />} />
          <Route path="/pageTwo" element={<pageTwo />} />
          <Route path="/pageThree" element={<pageThree />} />
          <Route path="/pageFour" element={<pageFour />} />
        </Routes>
      </div>
    </Router>
  );
}

关键说明：

• 移除本地page状态，改用useLocation获取当前路由，动态计算currentTabValue，确保路由与Tabs状态完全同步。
• 点击Tab时不再修改本地状态，而是通过navigate跳转路由，路由变化后自动同步Tabs选中状态。
• 移除Tab上的component={Link}，避免重复绑定导航逻辑，统一通过点击事件处理跳转。
• 映射表pathToTabValue集中管理路由与Tab的对应关系，后续新增标签只需修改该表即可。

修改后，无论点击标签还是直接输入路由路径，Tabs都能正确显示当前选中的标签，完全与路由同步。

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