Passing a NavLink to a Material UI component via the containerElement prop gives “Failed prop type” warning
Solution 1
I think you need to give it the markup for the containerElement
, something like this (rather than just the name of the element)
containerElement={<NavLink to="/home" />}
Give that a try and see if it works
Solution 2
As of Material UI 1.0 the prop is called component
:
import { Link } from 'react-router-dom'
import Button from 'material-ui/Button';
<Button component={Link} to="/open-collective">
Link
</Button>
More about Buttons.
Update:
From Material UI v4 you may need to use forwardRef
and wrap Link
into a div
:
const LinkRef = React.forwardRef((props, ref) => <div ref={ref}><Link {...props} /></div>)
<Button component={LinkRef} to="/open-collective">
Link
</Button>
More here.
Solution 3
The easiest solution is to put IconButton inside the Navlink, so whenever you click on the Iconbutton the NavLink is automatically clicked.
Here is a sample of the code:
<NavLink to="/" style={{ textDecoration: "none" }}>
<IconButton>
<Typography>Home</Typography>
</IconButton>
</NavLink>
Dockson
Updated on July 20, 2022Comments
-
Dockson almost 2 years
<RaisedButton containerElement={NavLink} to="/somewhere"> Somewhere </RaisedButton>
Produces the following warning:
Warning: Failed prop type: Invalid prop `containerElement` supplied to `RaisedButton`. in RaisedButton (at App.js:11) in App (at index.js:23) in Provider (at index.js:22) in MuiThemeProvider (at index.js:21)
but the Navlink properly renders and redirects to
/somewhere
on click. If this is a deprecated prop that still works then I haven't been able to find what the new prop is called... Please advise. If nothing else I'd like to hide the warning (how?).