Any way to render a component as a MenuItem?

[Josh Salverda]

This is the one of greatest modules out there, I spent 2 days trying (and failing miserably) to make something similar until I stumbled across it. Thanks so much for creating it!

The problem I'm running into is, when using react router 4, my menu ends up looking something like:

<Menu className="items-wrap">
    <ul className="items">
        <li className="item"><NavLink to={someUrl} className="some class names">Some text</NavLink></li>
        ...
    </ul>
</Menu>

That obviously doesn't work as-is since it needs to be a MenuItem to be tabbable/focusable. But, I couldn't find a way to render a NavLink as a MenuItem using the available props 😢 Nesting NavLink inside MenuItem sort of works, since that makes it tabbable, but the link isn't directly selectable.

Any suggestions on how to solve this?

[David Clark]

@joshsalverda Thanks! A couple of thoughts:

• Have you looked at #55? The idea there would be to allow the use of a custom component, not just a string tag prop like div or button.
• Instead of using the <NavLink> component you could use history.router.push() to change URL when a <MenuItem> is clicked, right?

[Josh Salverda]

Just got back around to looking into this... I like the idea of #55, I'll try out something similar for MenuItem and see how it works. If it's ends up being somewhat decent then I'll submit a PR.

I would prefer to avoid messing around with the router manually, but that's a good suggestion for a last resort :)

Thanks!

[David Clark]

Closing as stale, possibly resolved.