Problem when using ListItem Material ui

[DidierBoivin]

Hey, I am using a ListItem button to access to routes defined Here is my routes file `const routes = { '/': () => <ListeAgendas2 />, '/search': () => <Search />, '/newcase': () => <NewCase />, '/agenda': () => <ListeAgendas2 />,

} export default routes;The main file is <List>

         {[{id: 'Agendas', url: '/agenda'},{id: 'Search', url: '/search'},{ id: 'NewCase', url: '/newcase'}].map((element, index) => ( 
          
            <ListItem button key={element.id} component={A} href={element.url}>
            <ListItemIcon>{ <InboxIcon /> }</ListItemIcon>
            <ListItemText primary={element.id} />
            
          </ListItem>
          
        ))}
      </List>`

I have this message 0.chunk.js:110570 Warning: Failed prop type: Invalid prop component supplied to ForwardRef(ButtonBase). Expected an element type that can hold a ref. Did you accidentally provide a plain function component instead?

Please help

[prageeth]

I'm having the same issue. I beleive the A component is missing the ForwardRef:

Please see the MaterialUI documentation: https://material-ui.com/guides/composition/#caveat-with-refs

Specifically, the definition of the A tag here (https://github.com/Paratron/hookrouter/blob/v1.2.3/src/Link.js#L51) should use a Forward Ref: https://reactjs.org/docs/react-api.html#reactforwardref

export const A = React.forwardRef(
   (props, ref) => <a ref={ref} {...setLinkProps(props)} />
);

[prageeth]

@DidierBoivin I've fixed it in my fork for now, and I use it in my own project. You can install it directly via github:

npm install hookrouter@pureartisan/hookrouter#mui --save