Reactjs 使用物料界面的列表项链接

我已经创建了一个材质UI

ListItem

菜单，如下所示。
当我点击按钮时，它会将URL更新为

http://localhost:3000/createIdea

，但页面不会通过路由器加载

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

DrawerMenu.js

具有路由：

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

---

如何解决此问题？

将

链接

组件包装在

列表项

组件周围是否能够解决此问题？像这样：

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

---

您可以试试这个。这对我有用

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

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

从'react router dom'导入{Link}；

从react路由器dom 5.2.0开始@材料界面/核心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>
  );
};

从'react router dom'导入{useHistory}；
常量Foo=（）=>{
const history=useHistory（）；
返回(
history.push（'/createIdea'）}>
);
};

试试这个

家
关于我

什么意思}/>？如果没有，请删除它，因为它令人困惑。它要么是一个表情符号，要么是一段模糊的代码，但是知道它会很好。

需要一些修复，所以使用

component=“{Link}”

将

component

作为一个完整的属性。也许这有帮助。你可以考虑添加一个反应路由器标签：你所做的实际上很好。“页面不加载”是什么意思？您是否在控制台或页面上看到任何错误？看看这个演示，让我知道它是否有帮助：解决了问题，路由有我删除的标记（在menu.js中），不知道它为什么在那里（从教程中），但一旦删除，它工作得很好。

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>
  );
};