Better Link composition API

[cloud-walker]

Hi all, surely this topic has been proposed in the past (considering the age of the library 😅 ), link me to eventual previous threads that I may have missed.

My current mental model about the Link component from react-router, now that I work with a lot of headless libraries (like Ariakit and Radix), is that in a way Link is an headless component too, but it lacks of an API to compose with UI components.

Both Ariakit and Radix has dedicated composition guides:

1. https://ariakit.org/guide/composition
2. https://www.radix-ui.com/docs/primitives/guides/composition

And considering their efforts on the topic, I'm proposing here to expose a similar approach, like the render prop from ariakit for example, so you can:

// router link that looks like a button
const buttonLink = (
  <Link
    render={<Button variant={{ mode: "ghost", size: "xs" }} />}
    to="/analytics"
  >
    Analytics
  </Link>
);

// router link that looks like an anchor
const anchorLink = (
  <Link render={<Anchor variant={{ tone: "neutral" }} />} to="/analytics">
    Analytics
  </Link>
);

This would maybe impact NavLink also, deprecating the current className solution 🤔

What do you think?