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>
        )
      }}

[snowystinger]

Hey, thanks for the discussion. Unfortunately there are a few tricky cases still. This is one of them. See the warning in our docs for why and how to resolve it https://react-aria.adobe.com/Tree#links
Let us know if you cannot get this working.

[tleunen]

Thank you @snowystinger! Somehow I missed that warning in the doc.

Just to make sure, you're saying that RouterProvider doesn't work with the Tree as well, so that's also why I couldn't make it work with it, despite the tree item taking a href prop and setting the href as a data-href attribute in the dom.

Using onAction for a client side routing system isn't great because 1) onAction only receives the item key, so we need to do a tree lookup again to get the item and its url, and 2) it prevents opening these links into new tabs with shift or right click (although the shift behavior could be done in JS I guess).

Feels like in this case, my real options are one of these:

• Stop caring about the warning of dom element mismatch and render a link directly in render()
• Render a div with a link inside (like the code above), and make sure that clicking/activating the div is "propagating" the click to the internal link or at least doing the same thing as the link.
• Use onAction like suggested by the doc, and doing a full tree lookup to retrieve the item url, but then we cannot open links in new tabs, which is not great when using a tree as a main navigation system.

Looks like this Tree with links fall into the "Synthetic links" case/explanation here, so ignoring the warning could make sense too I suppose?