Question

我已经创建了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>

该如何解决？

Answer 1

您可以尝试一下。它对我有用。

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

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

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

Answer 3

尝试一下

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

Answer 4

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

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

使用Material UI列出项目链接

4 个答案: