How to add a link to a List in material-ui 1.0?
ReactjsMaterial UiReactjs Problem Overview
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?
Reactjs Solutions
Solution 1 - Reactjs
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
Solution 2 - Reactjs
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.
Solution 3 - Reactjs
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>
https://stackoverflow.com/questions/39466270/render-link-in-material-ui-drawer/67075275#67075275
Solution 4 - Reactjs
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>
Solution 5 - Reactjs
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.
Solution 6 - Reactjs
For the update to @mui/material
(I believe 5.x.x)..
I don't feel this solution is ideal, and maybe someone can iterate on it, but I've made a simplified version of what the official docs now say to follow https://mui.com/guides/routing/#list (and then check the list
example which is pretty convoluted:
You will want to do something like the following:
<List>
<ListItemLink to="/" text="Home" />
</List>
Where ListItemLink
is the following:
const ListItemLink = ({to, text}) => {
const renderLink = React.useMemo(
() =>
React.forwardRef(function Link(itemProps, ref) {
return <RouterLink to={to} ref={ref} {...itemProps} role={undefined} />;
}),
[to],
);
return (
<ListItem button component={renderLink}>
<ListItemText primary={text} />
</ListItem>
)
}
You will also need to make sure that you:
import {
Route, Link as RouterLink, LinkProps as RouterLinkProps, Routes
} from "react-router-dom";
(I have included RouterLinkProps
here for those using typescript, but the full example which uses typescript is in the recommended link: https://mui.com/guides/routing/#list)