'MUI ListItem href prop not hitting my api routes

I have a node js backend for my api routes and i am using Passport js for my authenticaion.

Im facing an issue at the moment to hit my api route to log out the user. What scratches my head is, if i used a Button component with the href prop and manually enter the full endpoint url, that works.

If i used a ListItem component, it doesnt do anything.

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

Does anyone know why?

node.jsreactjsmaterial-uipassport.js


Solution 1:[1]

You can add component="a" at ListItem and then the link will working fine. You can try my code:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 wildgamer

Related Questions