Allow NavLink to receive a children function

[sergiodxa]

Right now the NavLink component has this useful className and style function support to change the styles if the link is active.

<NavLink to="." className={({ isActive }) => isActive ? activeClassName : inactiveClassName}>Content</NavLink>

<NavLink to="." style={({ isActive }) => isActive ? activeStyles : inactiveStyles}>Content</NavLink>

This is really cool, but one use case it doesn't support, but it's really easy to add support for, is what happens if inside the NavLink there are two, or more, elements and they need to change styles based on the isActive state, right now it's not really possible to detect that, specially when using utility CSS.

This PR adds support for that, which was also requested on the discussion #8080, copying the example from that discussion, now this is possible:

<NavLink to="path">
  {({isActive}) => (
    <>
      <Icon className={isActive ? 'text-blue-500' : 'text-gray-500'} />
      <span className={isActive ? 'text-blue-900' : 'text-gray-700'}>Link</span>
    </>
  )}
</NavLink>

I also updated the docs/api.md to mention and show an example of this and the tests of the NavLink component to test this works.

[sergiodxa]

I changed this example to use className instead of style, so the API docs of NavLink now can have one example of style, className and children as functions.

[mcansh]

this is technically already possible using a custom (Nav)Link component with the useResolvedPath and useMatch hooks - https://reactrouter.com/docs/en/v6/examples/custom-link. here's an example using an icon https://stackblitz.com/edit/github-kzress?file=src/App.tsx

though I personally am not opposed to the changes here

[ryanflorence]

Let's do it, @sergiodxa, I fixed the conflicts, you want to sign the contributors.yml in this PR and I'll merge it?

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[sergiodxa]

Let's do it, @sergiodxa, I fixed the conflicts, you want to sign the contributors.yml in this PR and I'll merge it?

Done!

[timdorr]

Fixed up the formatting for you, but it looks like there are a couple of test failures, unfortunately.

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[sergiodxa]

@timdorr I'm pretty sure it should be fixed now, could you run the workflow again? 🙏