使用 Material UI 的 List Item 链接答案

【问题标题】：List Item link using Material UI使用 Material UI 的 List Item 链接
【发布时间】：2019-01-18 09:16:46
【问题描述】：

我创建了一个 Material UI ListItem 菜单，如下所示。
当我点击按钮时，它会将 URL 更新为http://localhost:3000/createIdea，但页面不会通过路由器加载。

如果您进入浏览器 URL 窗口并按 Enter，则页面会加载。

DrawerMenu.js有路由：

<Route exact path='/createIdea' component={() => <CreateIdea />} />

还有App.js -> drawerMenu.js* -> tiledata.js:

<ListItem button component={Link} to="/createIdea">   
    <ListItemIcon>
      <WhatsHotIcon/>
    </ListItemIcon>
    <ListItemText primary="Create Idea"/>
</ListItem>

我能做些什么来解决这个问题？

【问题讨论】：

} /> 是什么意思？如果没有，请删除它，因为它令人困惑。它要么是一个表情符号，要么是一段晦涩难懂的代码，但很高兴知道。
<ListItem button component={Link} to="/createIdea"> 需要一些修正，所以使用component="{Link}" 使component 成为一个完整的属性。也许这会有所帮助。
有一个 react-router 标签你可以考虑添加:)
你所做的其实很好。 “页面未加载”是什么意思？您是否在控制台或页面上看到任何错误？看看这个演示，如果有帮助，请告诉我：codesandbox.io/s/lpwq74p30m
解决了问题，路由有标记（在 menu.js 中）包装，我删除了它，不知道为什么它在那里（来自教程），但是一旦删除，它工作正常.

标签： reactjs react-router material-ui

【解决方案1】：

你可以试试这个。它对我有用。

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

<ListItem button component={Link} to="/createIdea">   
    <ListItemIcon>
      <WhatsHotIcon/>
    </ListItemIcon>
    <ListItemText primary="Create Idea"/>
</ListItem>

【讨论】：

【解决方案2】：

从 react-router-dom 5.2.0 开始； @material-ui/core 4.11.0;

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

const Foo = () => {
  const history = useHistory();

  return (
    <ListItem onClick={() => history.push('/createIdea')}>
      <ListItemIcon>
        <WhatsHotIcon/>
      </ListItemIcon>
      <ListItemText primary="Create Idea"/>
    </ListItem>
  );
};

【讨论】：

谢谢！在我使用其他方法遇到 TypeScript 痛苦之后，这对我有所帮助。

【解决方案3】：

试试这个

 <List disablePadding>
    <ListItem button component={Link} to="/">
      <ListItemText>Home</ListItemText>
    </ListItem>
    <ListItem button component={Link} to="/about">
      <ListItemText>About Me</ListItemText>
    </ListItem>
</List>

【讨论】：

【解决方案4】：

将Link 组件包裹在ListItem 组件周围是否能够解决问题？像这样：

<Link to="/createIdea">
    <ListItem>   
        <ListItemIcon>
          <WhatsHotIcon/>
        </ListItemIcon>
        <ListItemText primary="Create Idea"/>
    </ListItem>
</Link>

【讨论】：