Search and path params in TanStack Router incompatible with useHref

[levrik]

Provide a general summary of the issue here

TanStack Router interpolates path params into the href:

<Link to="/projects/$id" params={{ id: '123' }}>Open</Link>

When using React Aria Components' router integration this gets turned into:

<Link href="/projects/$id" routerOptions={{ params: { id: '123' } }}>Open</Link>

As useHref of RouterProvider only receives the href but not routerOptions like navigate does, the navigation itself works correctly but the native features like Cmd+Click (or right-click "Open in new tab") navigate to the href template instead of the real link. Also the URL preview shown by the browser is wrong.

This could easily be solved by also passing routerOptions to useHref.

TanStack Router can also manage search params through a separate prop which suffers from the same issue.

I'm open to contributing this change but wanted to check upfront in case I'm missing something here. Maybe there is a reason for routerOptions not being passed to useHref that I'm unaware of.

🤔 Expected Behavior?

href on a tag to be /projects/123 with the above example.

😯 Current Behavior

href on a tag is /projects/$id with the above example.

💁 Possible Solution

Pass routerOptions to useHref as 2nd paramter.

🔦 Context

No response

[levrik]

I went ahead and created #6591 as I needed this change anyway to unblock myself at work. Let me know what you think.

[lithdew]

What do you think about making href optional for components if routerOptions is provided?

For both Tanstack Router and React Router, routerOptions is solely needed in order to be able to generate the necessary href to attach to components. RouterProvider's useHref can then solely take in routerOptions instead of the href passed in to components.

[devongovett]

You can also define the href type to accept an object instead of a string if you want.

declare module 'react-aria-components' {
  interface RouterConfig {
    href: YourRouterHref
  }
}