Render links with a custom router within a tree

[tleunen]

Hey there,

I was trying to render links connected to a react router in a tree to be able to navigate to a few pages. After failing using the href prop on the item and the RouterProvider with the react-router navigate function (I guess I should maybe file a bug report but I haven't tried in a codesandbox to verify this take).
I then tried using the new render prop on the TreeItem since I thought that may be the new direction where the team wants us to go after all. But the tree item expects a div. Not a link. And according to the doc, we're not supposed to render another node than the expected one.

So what's the solution here to make navigating work?

My current solution is to do sth like this, but this is far from being great as navigating with the keyboard on the items will never trigger the navigation. (the div is focused, not the link itself)

I'm using react aria components btw

      render={({ children, ...domProps }) => {
        return (
          <div {...domProps}>
              <Link to={to}>{children}</Link>
          </div>
        )
      }}