Material-ui: ButtonBase didn't accept function as component property

[andryxaSc]

In upgrading material v3.9.3 to v4.0.0 error happens. The error happens only in v4.0.0.
I am trying to pass NavLink component to Tab.

ButtonBase.js:142 Uncaught (in promise) Error: Material-UI: expected an Element but found null. Please check your console for additional warnings and try fixing those. If the error persists please file an issue.

Wrapping NavLink with class component resolve this issue.

[eps1lon]

Please check your console. There should be multiple warnings. One of which links to https://material-ui.com/guides/composition/#caveat-with-refs

[oliviertassinari]

~I'm closing as a duplicate of #15827 as it follows the issue template.~

[hsimah]

EDIT tl;dr NavLink expects the prop innerRef not just ref.

I'm currently upgrading to v4 and this issue has presented itself. If I use a React Router Link my components render correctly, if I use a NavLink I get the ref caveat error.

// works
<Tab
    label='Profile'
    icon={<Star />}
    value={`${url}/profile`}
    component={Link}
    to={joinPath(url, 'profile')}
    classes={{
        root: classes.tab,
    }}
/>
// also works, but ugly
<Tab
    label='Profile'
    icon={<Star />}
    value={`${url}/profile`}
    component={React.forwardRef((props, ref) => <NavLink {...props} ref={ref}/>)}
    to={joinPath(url, 'profile')}
    classes={{
        root: classes.tab,
    }}
/>

[eps1lon]

@hsimah Please see https://material-ui.com/components/buttons/#third-party-routing-library or https://material-ui.com/guides/composition/#caveat-with-refs

[hsimah]

@eps1lon thanks, the ref prop on a NavLink is called innerRef not ref. Supplying the forwardRef wrapper and the correct prop name works.

[eps1lon]

@eps1lon thanks, the ref prop on a NavLink is called innerRef not ref.

Not sure what you're referring to. The documented fix doesn't use ref but innerRef for that exact reason. A future react-router version wouldn't need innerRef anymore.

[hsimah]

Not sure what you're referring to. The documented fix doesn't use ref but innerRef for that exact reason. A future react-router version wouldn't need innerRef anymore.

My code sample - I was using the incorrect prop name. All good, code working now.