MUI ListItem href 道具没有击中我的 api 路线

Question

我的 api 路由有一个节点 js 后端，我正在使用 Passport js 进行身份验证。

我现在遇到一个问题，需要点击 api 路由来注销用户。令我头疼的是，如果我使用带有 href 属性的 Button 组件并手动输入完整端点 url，那是可行的。

如果我使用 ListItem 组件，它不会执行任何操作。

<ListItem button href='http://localhost:5000/auth/logout'>
   <ListItemIcon>
      <LogoutIcon color='secondary' />
   </ListItemIcon>
   <ListItemText primary='Logout' />
</ListItem>

有人知道为什么吗？

Answer 1

您可以在 ListItem 中添加 component="a"，然后 link 将正常工作。你可以试试我的代码：

<ListItem button component="a" href='http://localhost:5000/auth/logout'>
   <ListItemIcon>
      <LogoutIcon color='secondary' />
   </ListItemIcon>
   <ListItemText primary='Logout' />
</ListItem>

MUI ListItem href 道具没有击中我的 api 路线

MUI ListItem href prop not hitting my api routes

node.js

reactjs

material-ui

passport.js