Material UI持久抽屉（persistant drawer）导航路由配置方法咨询

前提依赖 #

• 已正确安装配置 react-router-dom（v5/v6 版本均可使用该方案）
• 已完成MUI核心组件、所需图标的导入操作

实现步骤 #

1. 替换原有字符串数组为结构化的菜单项配置，统一管理文案、跳转路径、对应图标，避免按索引匹配的不可靠逻辑：

const menuItems = [
  { text: 'Home', path: '/', icon: <HomeOutlinedIcon /> },
  { text: 'About', path: '/about', icon: <InfoOutlined /> },
  { text: 'Services', path: '/services', icon: <SettingsOutlinedIcon /> },
  { text: 'Contact', path: '/contact', icon: <MailIcon /> }
]

2. 利用MUI组件原生支持的component属性绑定路由Link，这是官方推荐的写法，不会破坏原有组件样式和交互效果：

import { Link, useLocation } from 'react-router-dom'

// 组件内部逻辑
// 可选：获取当前路由实现激活项高亮
const location = useLocation()

// 渲染部分
<List>
  {menuItems.map((item) => (
    <ListItem
      button
      key={item.text}
      component={Link}
      to={item.path}
      // 可选配置：当前路径匹配时高亮选中项
      selected={location.pathname === item.path}
    >
      <ListItemIcon>
        {item.icon}
      </ListItemIcon>
      <ListItemText primary={item.text} />
    </ListItem>
  ))}
</List>

核心说明 #

MUI的可交互组件都支持自定义底层渲染元素的component属性，直接指定为React Router的Link组件后，ListItem会保留原有的按钮样式、点击涟漪效果，同时正常触发路由跳转能力，不需要额外嵌套Link标签。之前绑定失败大概率是直接在ListItem外层嵌套Link导致的DOM结构异常、样式错位问题。

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