如何在React+Material UI中使用Link组件实现页面导航？

你的代码存在几个关键问题导致路由无法正常工作，以下是简洁的修正方案：

问题点梳理 #

1. Link组件命名冲突：你在MUI的Link里指定component={Link}，没有区分开MUI样式组件和React Router的路由组件
2. 静态内容未动态生成：遍历pages数组时，所有链接都固定指向/并显示Home，完全没用到遍历的page变量
3. 缺少列表key：React列表遍历必须提供唯一key属性，否则会触发性能警告

正确实现方式 #

1. 确认App.tsx的路由基础配置 #

先保证根组件里已经正确配置了React Router规则：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Menu from './pages/Menu';
import Reservation from './pages/Reservation';

function App() {
  return (
    <Router>
      {/* 这里放置你的导航栏组件 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/menu" element={<Menu />} />
        <Route path="/reservation" element={<Reservation />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 修正导航栏代码 #

修改导航部分代码，动态生成对应路由链接：

import { Link as RouterLink } from 'react-router-dom';
import { Link, Box } from '@mui/material';

const pages = ['home', 'menu', 'reservation'];

<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
  {pages.map((page) => (
    <Link
      key={page}
      component={RouterLink}
      // 处理home的根路径，其他页面直接使用page名称
      to={`/${page === 'home' ? '' : page}`}
      sx={{ 
        mx: 2, 
        textDecoration: 'none', 
        color: 'inherit',
        '&:hover': { color: 'primary.main' }
      }}
    >
      {/* 将页面名称首字母大写，优化显示效果 */}
      {page.charAt(0).toUpperCase() + page.slice(1)}
    </Link>
  ))}
</Box>

核心说明 #

• 组件区分：通过别名RouterLink导入React Router的路由组件，MUI的Link作为样式容器，通过component属性绑定路由跳转逻辑
• 动态路由生成：根据遍历的page变量自动生成对应路径，home页面指向根路径/，其他页面匹配各自路由
• 样式自定义：通过sx属性直接添加MUI样式规则，比如 hover 效果、间距等，贴合MUI设计规范

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