score:88
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.
score:0
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.
score:0
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)
score:1
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>
score:2
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>
score:163
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
Source: stackoverflow.com
Related Query
- How to add a link to a List in material-ui 1.0?
- How to add redirect link to onclick Material ui icon - React
- How to add multiple classes in Material UI using the classes props?
- How to add close icon in Material UI Dialog Header top right corner
- How can I add an icon to Material UI Select options?
- How to add new elements without re-rendering whole list with React
- How do I add borderTop to React Material UI Table?
- How to add custom font weights to Material UI?
- How to add pagination to a long list using React MaterialUI?
- How to add RTL support for Material UI React
- How to add custom `PNG` image to material ui icon
- how to add footer to material ui drawer component?
- How to add custom colors name on Material UI with TypeScript?
- How to add components to list dynamically in React with no redundant render?
- How to add a new row for grid item in material ui?
- How to add floating action button on the right-bottom side of the screen using material ui in react
- How to add horizontal scroll in Material UI grid
- How to disable the Material UI Link API component
- How to add dynamic code inside of a React Router Link component
- How to add and remove add class for list in reactjs?
- In React, how to add a URL "string" as an object's property, from a Link or other component
- How to add dynamic link to table data
- WebStorm: how to add jsx file type to 'File > New' list
- How to add className to list from map array depending on object value
- How to add a list of global components in nextjs
- How to add dynamic content to React Material UI expansion panels whilst keeping only one active tab at at time functionality
- How to add list to list in Immutable.js?
- Keycloak - How to add Back to app link on login page
- How to add new attributes to Material UI Shadows | Typescript
- How to add material ui to gatsby site generator
More Query from same tag
- React styles object not being applied
- React won't render more than one component
- Error during initialization: No matching bindings found for serviceIdentifier: Symbol(LicencesService)
- Default export error even after exporting the component in ReactJS
- testing a react form with pure Jest library (no enzyme) not working
- How to handle react state and pros update appropriately with reducer
- How to hide validation error in React Js upon updating the input field?
- Why doesn't the onClick action add a value to an existing integer
- Can't use Redux props in firebase redirect results
- Passing dynamic onChange listener to children
- react+redux reducer handling with null
- Im not able to set an initial state in my react-native application
- How to avoid nested map for better rendering performance?
- TypeScript: Google "One Tap" Cannot find name 'googleyolo'
- Get pathname of from where user clicked in Next.JS
- Force a disabled MI TextField to be clickable
- plot lines to leaflet map
- Add normalize.css to reactjs
- Remove unwanted characters from a string in table cell
- How to redirect after login to a UserProfile view
- React - Getting "Component definition is missing display name" error when using React.memo
- How to play an mp3 once onClick in react?
- Bounce scrolling in iPad (react)
- react - input change not firing when select all to delete
- How do I make a number quickly rise from zero when rendering a page in React.js?
- Clean Create React App's cache when importing graphql files
- Pressing Tab to active Enter key
- html-react-parser: Replace DOM Node with another DOM Node containing inner text child (A-link)
- Why my Cart.js is not rendering? React-Router
- How to get Data from api using axios in redux-toolkit