I am using react mui MenuItem and I need to make a menu item as a link. I have tried to that like this:
<MenuItem
component={<Link href={`/backend/api/exam/${row.id}/result`} />}
className={classes.menuItem}
onClick={() => handleClose()}>
Result
</MenuItem>
But, when I do that, it throws an error where it says that property component
does not exist on MenuItem
:
Property 'component' does not exist on type 'IntrinsicAttributes & { action?: ((instance: ButtonBaseActions | null) => void) | RefObject | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & { ...; } & { ...; } & CommonProps<...>...'. TS2322
What am I doing wrong here, why do I get this error?
The documentation:
Type: elementType
Description: Either a string to use a DOM element or a component.
Using a component as a React.Node
wouldn't work.
The component prop expects the following: React.Element<typeof Component>
.
In your case, providing the component as a typeof
will do the trick:
import { Link } from 'react-router-dom';
....
<MenuItem
component={Link}
to={`/backend/api/exam/${row.id}/result`}
className={classes.menuItem}
onClick={() => handleClose()}>
Result
</MenuItem>
Another work around would be to wrap your <MenuItem>
inside a <Link>
:
<Link to={`/backend/api/exam/${row.id}/result`}>
<MenuItem
className={classes.menuItem}
onClick={() => handleClose()}>
>
Result
</MenuItem>
</Link>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.