MUI MenuItem结合Link无法跳转至指定路由问题求助

核心问题排查与修复步骤 #

1. 确认路由基础配置
   首先确保你的整个应用已经被react-router-dom的路由容器（如BrowserRouter）包裹，没有这一步所有路由跳转都不会生效：

   import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
   
   function App() {
     return (
       <Router>
         {/* 你的AppBar、Menu等组件 */}
         <Routes>
           <Route path="/beer" element={<BeersPage />} />
           <Route path="/beer/me" element={<MyBeersPage />} />
           <Route path="/beer/new" element={<NewBeerPage />} />
         </Routes>
       </Router>
     );
   }
   

2. 修正组件参数与Link导入
   你代码里用href传递路由地址，但react-router-dom的Link组件接受的是to属性，同时要确保导入的是react-router-dom的Link而非MUI自带的Link：

   // 正确导入
   import { Link } from 'react-router-dom';
   

3. 两种可行的组件写法

   写法一：Link嵌套在MenuItem内部（推荐，逻辑更清晰）

   将Link放在MenuItem里面，同时处理菜单关闭逻辑，避免事件冲突：

   const HamburgerMenuLink = ({ text, to }) => {
     const handleMenuItemClick = () => {
       handleCloseNavMenu();
     };
   
     return (
       <MenuItem onClick={handleMenuItemClick}>
         <Link 
           to={to} 
           style={{ 
             textDecoration: 'none', 
             color: 'inherit', 
             width: '100%', 
             textAlign: 'center' 
           }}
         >
           <Typography>{text}</Typography>
         </Link>
       </MenuItem>
     );
   };
   

   写法二：用MenuItem的component属性绑定Link

   直接让MenuItem渲染为Link组件，注意正确传递to属性：

   const HamburgerMenuLink = ({ text, to }) => {
     return (
       <MenuItem 
         component={Link} 
         to={to} 
         onClick={handleCloseNavMenu}
         sx={{ textAlign: 'center' }}
       >
         <Typography>{text}</Typography>
       </MenuItem>
     );
   };
   

4. 修正组件调用参数
   将调用时的href改为to，匹配react-router-dom的API：

   <Menu
     id="menu-appbar"
     anchorEl={anchorElNav}
     anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
     keepMounted
     transformOrigin={{ vertical: "top", horizontal: "left" }}
     open={Boolean(anchorElNav)}
     onClose={handleCloseNavMenu}
     sx={{ display: { xs: "block", md: "none" } }}
   >
     <HamburgerMenuLink text="Beers" to="/beer" />
     <HamburgerMenuLink text="My Beers" to="/beer/me" />
     <HamburgerMenuLink text="New Beer" to="/beer/new" />
   </Menu>
   

常见错误原因 #

• 混淆了MUI的Link和react-router-dom的Link，前者是样式组件，后者负责路由跳转
• 应用未被路由容器包裹，导致路由系统无法识别跳转指令
• 使用了错误的属性名（如用href代替to）传递路由地址
• 点击事件中意外阻止了默认行为，导致Link的跳转逻辑失效

内容的提问来源于stack exchange，提问作者will-hedges