New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Convert ListItem compatible with react-router #7956
Comments
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This is covered in the documentation: https://material-ui.com/components/buttons/#third-party-routing-library. import React from 'react';
import { MemoryRouter as Router } from 'react-router';
import { Link, LinkProps } from 'react-router-dom';
import ListItem from '@material-ui/core/ListItem';
import { Omit } from '@material-ui/types';
// The usage of React.forwardRef will no longer be required for react-router-dom v6.
// see https://github.com/ReactTraining/react-router/issues/6056
const AdapterLink = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => (
<Link innerRef={ref as any} {...props} />
));
const CollisionLink = React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'innerRef' | 'to'>>(
(props, ref) => <Link innerRef={ref as any} to="/getting-started/installation/" {...props} />,
);
export default function ButtonRouter() {
return (
<Router>
<ListItem color="primary" component={AdapterLink} to="/">
Simple case
</ListItem>
<ListItem component={CollisionLink}>Avoids props collision</ListItem>
</Router>
);
} |
I don't see it in the docs: This is a common thing when using React Router, but it's not clear how to use |
When using @mehrdaad 's solution the links look like normal MUI list, but when using |
This comment has been minimized.
This comment has been minimized.
@zhangwei900808 No, that's still wrong semantically, it generates Just use the answer provided above |
@oliviertassinari Would there be an easier way to do: const styles = {
li: {
'&:hover': {
backgroundColor: 'transparent',
},
},
};
// ...
<MenuItem disableGutters className={classes.li}>
<Button component={Link} to="/logout" ... To avoid a double hover effect, on the demo: https://codesandbox.io/s/nk834yk5pl (not using |
@caub Why are you introducting an extra Button component? You can use the component property on the MenuItem. |
@oliviertassinari because |
@caub |
Ok, thanks, fine https://codesandbox.io/s/lpwq74p30m |
Here is the solution that solved my issue
Thus just use ListItem as |
This comment has been minimized.
This comment has been minimized.
The most voted answer failed after the MUI v4 migration (I'm on 4.3.1) due to "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?" I've replaced the import React, { Component } from "react"
import { NavLink } from "react-router-dom"
/**
* React Router Nav Link wrapper to forward the ref to fix "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"
*
* From https://material-ui.com/guides/composition/#caveat-with-refs
*/
class NavLinkMui extends Component {
render() {
const { forwardedRef, ...props } = this.props
return <NavLink {...props} ref={forwardedRef} />
}
}
export default NavLinkMui Usage: <ListItem
button
component={NavLinkMui}
to='/'
>
<ListItemIcon>
<SlideshowIcon />
</ListItemIcon>
</ListItem> |
@HugoGresse Yes, you need to use the forward ref API. You should be able to find examples in the documentation. I have updated #7956 (comment) with an up-to-date answer. Let us know if it's OK. |
@oliviertassinari it did. I'm still having some issue with either the forwardRef solution or Component one where the Button text color is not taking into account the theme palette color. The text color should be white to match Probably linked to a change on MUI because without the For those reading up here, you can pass additional props to the ListItemText...
BTW, your example is now in TS. |
|
For others trying to do this in Typescript: A simple example using the ListItem component property to specify a element as the ListItem implementation. The trick in Typescript is to use the spread operator (...) on the props of the ListItem to sneak past the unwanted and unneeded Typescript errors that specifying this type of component and "to" properties for the ListItem would normally bring about (Typescript error TS2769 Property 'component' does not exist on type 'IntrinsicAttributes...)
or alternatively if you just want to use an onClick function on the ListItem for example:
|
This worked for me const NavLinkMui = React.forwardRef((props, ref) => (
<NavLink {...props} activeClassName="Mui-selected" ref={ref} />
)) <ListItem button component={NavLinkMui} to={to}>{text}</ListItem> |
Thanks @HugoGresse This works perfectly well :-) |
I want to make each
ListItem
in aList
to aLink
component.I have a
Drawer
component composed of aList
component,That List is composed of 4
ListItem
s.What I want to achieve is that convert each
ListItem
to a React routerLink
.I tried to modify drawer's onClick method, get Id of the clicked ListItem and then programmatically change location of window based on the id.
But I do think this approach is more jqueryish that the react concepts.
I also tried to add
Link
tocomponent
prop inListItem
, but it resulted error.( I've seen you have used a incomponent
prop in docs).What is the recommended way to achieve this requirement?
The text was updated successfully, but these errors were encountered: