React Router 4：点击Material-UI抽屉链接跳转新页面而非渲染组件

看起来你遇到了两个关联问题：点击Drawer里的链接会触发页面跳转而非在<main>标签内渲染目标组件，同时控制台还出现了Material-UI的props无效警告。我来帮你一步步排查修复：

一、路由跳转失效的核心原因与修复 #

你在代码里用ListItem component={Link}的方式集成React Router的Link，但这里有个容易忽略的冲突点：ListItem的button属性会强制组件渲染为<button>元素，和你指定的component={Link}（会渲染为<a>标签）产生冲突，这直接导致Link的单页面路由行为失效，浏览器触发了默认的页面跳转逻辑。

修复方法很简单，去掉ListItem的button属性即可：

<ListItem 
  key={option} 
  component={Link} 
  to={`/${slugify(option, {lower: true})}`}
>
  <ListItemText primary={option} />
</ListItem>

另外要确保你的Home组件被包裹在React Router的BrowserRouter（或HashRouter）容器内，比如根组件结构应该是这样：

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Home />
    </BrowserRouter>
  );
}

如果Home不在Router容器内，React Router的路由机制完全无法工作，自然会触发页面跳转。

二、解决Material-UI的props无效警告 #

控制台的Warning: Material-UI: the value provided undefined is invalid警告，大概率是因为slugify(option, {lower: true})返回了undefined，导致to属性值无效，进而让Material-UI的ListItem组件接收到非法props。

你可以从这两个方向排查修复：

• 先检查options数组的内容，确保每一项都是有效的非空字符串；
• 给slugify的结果添加默认值，避免生成undefined的路径：

const path = slugify(option, {lower: true}) || 'default';
<ListItem 
  key={option} 
  component={Link} 
  to={`/${path}`}
>
  <ListItemText primary={option} />
</ListItem>

如果options数组里存在undefined或空值项，建议先过滤掉这些无效项：

{options.filter(opt => opt).map(option => {
  // 后续渲染逻辑
})}

额外验证方案 #

如果以上修复后仍有问题，可以尝试用React Router的Link组件直接包裹ListItemText，作为替代实现方式：

<ListItem button>
  <Link to={`/${slugify(option, {lower: true})}`}>
    <ListItemText primary={option} />
  </Link>
</ListItem>

这种方式既能保留ListItem的点击样式，也能确保单页面路由跳转正常工作。

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