CODEWITHSUNDEEP
reactjsmaterial-ui
Luis F.
Luis F.

Reputation: 1360

How to add a link to a List in material-ui 1.0?

The following messes with the onClick animation (the ListItem turns red):

<List>
  <a href="https://www.google.com">
    <ListItem button>
       <ListItemText primary="Google" />
     </ListItem>
   </a>
 </List>

While adding the link inside ListItem, only makes the transition work if ListItemText is clicked, which is not what I want. What is the correct way to add a link?

Upvotes: 78

Views: 73351

Answers (8)

imjoymhnt
imjoymhnt

Reputation: 1091

    <Link to="/categories">
          <ListItem key={index} disablePadding sx={{ display: "block" }}>
            <ListItemButton
            >
              
              <ListItemText
              />
            </ListItemButton>
          </ListItem>
        </Link>

Upvotes: 0

Miguel Fern&#225;ndez
Miguel Fern&#225;ndez

Reputation: 45

ListItem's button prop is now DEPRECATED as you can see in ListItem props (MUI API Docs)

This would be the updated version of the code proposed by @JulesDupont answer:

<List>
  <ListItem>
    <ListItemButton component="a" href="https://www.google.com">
      <ListItemText primary="Google" />
    </ListItemButton>
  </ListItem>
</List>

Upvotes: 2

Felix Hagspiel
Felix Hagspiel

Reputation: 2937

For mui V5 + NextJS and if you want to have multiple children inside the list item (for example text and an icon) this worked for me:

import {
  Link,
  ListItem,
  ListItemIcon,
  ListItemText,
} from '@mui/material';
import NextLink from 'next/link';

<NextLink href="/some/route" passHref>
  <ListItem
    button
    component={Link}
  >
    <ListItemIcon>
      <SupportIcon />
    </ListItemIcon>
    <ListItemText
      primary="Support"
      secondary="Get super friendly support"
    ></ListItemText>
  </ListItem>
</NextLink>

This will give you real a-tags that still have nextjs-routing without page reloads.

Upvotes: 3

Ian H.
Ian H.

Reputation: 3919

For usage with Next.js, this worked for me:

import Link from "next/link";

<List>
    <Link href="/myUrl" passHref>
        <ListItem button component="a">
            My Link Text
        </ListItem>
    </Link>
</List>

Upvotes: 4

Mahesh More
Mahesh More

Reputation: 149

I have faced the same issue but maybe a new update in materialUI due to this is not working, There has some tweak as import from import Link from '@material-ui/core/Link';

so it will works

 import Link from '@material-ui/core/Link';

 <List>
  <ListItem button component={Link} href="/dsda">
    <ListItemIcon>
      <DashboardIcon />
    </ListItemIcon>
    <ListItemText primary="DashBoard"/>
  </ListItem>
 </List>

Render Link in material ui Drawer

Upvotes: 4

Safwat Fathi
Safwat Fathi

Reputation: 1005

import React, { forwardRef } from "react";
// material-ui components
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
// react-router
import { Link as RouterLink } from "react-router-dom";
const ListItemLink = (props) => {
  const { icon, primary, to } = props;

  const renderLink = React.useMemo(
    () =>
      forwardRef((itemProps, ref) => (
        <RouterLink to={to} ref={ref} {...itemProps} />
      )),
    [to]
  );

  return (
    <>
      <ListItem button component={renderLink}>
        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
        <ListItemText primary={primary} />
      </ListItem>
    </>
  );
};

export default ListItemLink;

It's actually available in the docs.

Upvotes: 1

Julian Botia
Julian Botia

Reputation: 1951

to use with "react-router-dom"

import { Link } from "react-router-dom";
<ListItem button component={Link} to="/design">

the example is based in this section: docs

Upvotes: 181

Jules Dupont
Jules Dupont

Reputation: 7567

The easiest way to accomplish this is to make the ListItem a link by using the component prop:

<List>
  <ListItem button component="a" href="https://www.google.com">
    <ListItemText primary="Google" />
  </ListItem>
</List>

That way, the ListItem will be an anchor tag linking to the desired place, but still receive the appropriate styling so that there won't be any visual changes.

The behavior of the component prop is documented here. Note that the href prop will be automatically passed to the anchor tag, as specified by the last line in the props documentation:

Any other properties supplied will be spread to the root element.

Upvotes: 97

Related Questions