Customize root element of <NavLink>

[SevenOutman]

Hi, I find it such common use case to combine <NavLink> with navigation components from UI libraries. Those components usually accept an active prop that changes their appearance, it should have been easy to integrate but it's actually not as <NavLink> doesn't allow customize its root element.

Take this <Nav.Item> component for example, I wish to combine it with NavLink like this:

<NavLink to="about">
  {({ isActive }) => (
    <Nav.Item active={isActive}>About</Nav.Item>
  )}
</NavLink>

It does not work well because it renders an extra wrapping the <Nav.Item>.

What I have to do now is to query the active state manually via useMatch.

const match = useMatch('about');

<Nav.Item active={Boolean(match)} component={NavLink} to="about"> 
  About
</Nav.Item>

It works but what's the point in using NavLink here then?

I think it would be great if NavLink provide an API that allow user to get rid of its default root element like

<NavLink to="about" render={({ isActive }) => (
  <Nav.Item active={isActive}>About</Nav.Item> // doesn't render the default <a> element
)} />

// Or even in simpler form

<NavLink to="about" component={Nav.Item} /> // passes `active` and stuff to Nav.Item

What do you folks think?