使用MUI AppBar结合React-Router时路由失效问题排查

我在用MUI构建React应用的AppBar组件时，结合React-Router实现路由跳转，但点击AppBar中的Tab标签时，URL并未切换到指定路径。

相关代码 #

Header组件（header.js） #

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { AppBar } from "@mui/material";
// import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import { Tabs, Tab } from "@mui/material";
import Typography from "@mui/material/Typography";
// import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import AddHomeWorkIcon from "@mui/icons-material/AddHomeWork";

function Header() {
  const [value, setValue] = useState();
  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          Welcome
        </Typography>
        <Tabs textColor="inherit" value={value} onChange={(e, value) => setValue(value)} indicatorColor="secondary">
          <Tab label="Dashboard"><Link to="/dashboard"></Link></Tab>
          <Tab label="Score"><Link to="/score"></Link></Tab>
          <Tab label="Accelarator"><Link to="/accelerator"></Link></Tab>
        </Tabs>
        <IconButton
          size="large"
          edge="start"
          color="inherit"
          aria-label="menu"
          sx={{ mr: 2 }}
        >
          {/*This is a simple Menu
             Icon wrapped in Icon */}
          <MenuIcon />
          <AddHomeWorkIcon />
        </IconButton>
      </Toolbar>
    </AppBar>
  );
}
export default Header;

路由配置（App.js） #

import React from "react";
import { Routes, Route } from 'react-router'
import "./App.css";
import Header from "./components/header";
// import DashboardTable from "./components/table";
// Pages
import accelerator from "./pages/Accelerator/accelarator";
import dashboard from "./pages/Dashboard/dashboard";
import landingPage from "./pages/Landing-page/landing";
import leadPage from "./pages/Lead-score/lead";


function App() {
  return (
    <div className="App">
        <Header />
        <Routes>
          <Route path="/" Component={landingPage} />
          <Route path="/dashboard" Component={dashboard} />
          <Route path="/score" Component={leadPage} />
          <Route path="/accelerator" Component={accelerator} />
        </Routes>
    </div>
  );
}

export default App;

问题集中在三个关键点，逐一修复即可解决：

1. 修复Tab与Link的绑定逻辑 #

你当前在Tab内部放置了空的Link组件，点击Tab时不会触发Link的跳转——因为Link无内容，点击事件被Tab本身拦截。推荐两种绑定方式：

方式一：将Tab直接渲染为Link组件 #

给Tab指定component属性为Link，同时传递路由路径：

// 修改Header组件中的Tabs部分
<Tabs textColor="inherit" value={value} onChange={(e, newValue) => setValue(newValue)} indicatorColor="secondary">
  <Tab label="Dashboard" component={Link} to="/dashboard" />
  <Tab label="Score" component={Link} to="/score" />
  <Tab label="Accelerator" component={Link} to="/accelerator" />
</Tabs>

方式二：用Link包裹Tab #

确保Tab的点击事件能触发Link跳转，同时保留Tab的样式：

<Tabs textColor="inherit" value={value} onChange={(e, newValue) => setValue(newValue)} indicatorColor="secondary">
  <Link to="/dashboard" style={{ textDecoration: 'none', color: 'inherit' }}>
    <Tab label="Dashboard" />
  </Link>
  <Link to="/score" style={{ textDecoration: 'none', color: 'inherit' }}>
    <Tab label="Score" />
  </Link>
  <Link to="/accelerator" style={{ textDecoration: 'none', color: 'inherit' }}>
    <Tab label="Accelerator" />
  </Link>
</Tabs>

2. 同步Tab选中状态与当前路由 #

当前Tabs的value仅为本地状态，不会随路由变化更新。可以通过useLocation钩子获取当前路径，匹配对应Tab的索引：

// 在Header组件中添加导入和逻辑
import { Link, useLocation } from "react-router-dom";
import { useEffect } from "react";

function Header() {
  const location = useLocation();
  
  // 根据当前路径匹配Tab索引
  const getTabValue = () => {
    switch(location.pathname) {
      case "/dashboard": return 0;
      case "/score": return 1;
      case "/accelerator": return 2;
      default: return false; // 默认不选中任何Tab，可按需调整
    }
  };

  const [value, setValue] = useState(getTabValue());

  // 监听路由变化，更新Tab选中状态
  useEffect(() => {
    setValue(getTabValue());
  }, [location.pathname]);

  return (
    // 其余代码保持不变
  );
}

3. 修复React Router v6的路由属性错误 #

React Router v6中，路由组件的属性是小写的element，而非大写的Component，同时需要用JSX语法传入组件：

// 修改App.js中的Routes部分
<Routes>
  <Route path="/" element={<landingPage />} />
  <Route path="/dashboard" element={<dashboard />} />
  <Route path="/score" element={<leadPage />} />
  <Route path="/accelerator" element={<accelerator />} />
</Routes>

注：建议组件名使用大驼峰命名（如LandingPage），符合React组件的命名规范，避免混淆。

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