How to get Table Row working with Tanstack Router?

[depsimon]

I'm trying to use the Table Row with a navigation in Tanstack Router.

I've been naively trying to wrap the Row in createLink as it's recommended for MenuItem & Link but that doesn't trigger the client side navigation.

import { Row } from "react-aria-components";

export const RowWithRouter = createLink(Row);

<RowWithRouter to="/admin/users/$id" params={{ id: item.id }}>
  ...
</RowWithRouter>

I do get this error in the console when clicking the row but that doesn't seem helpful

20:28:44.134 TypeError: NetworkError when attempting to fetch resource. 

The above error occurred in the <MatchInnerImpl> component.

React will try to recreate this component tree from scratch using the error boundary you provided, CatchBoundaryImpl.
react-dom_client.js:6264:19

Is there a different way of achieving this?

[rothsandro]

Not sure what exactly produces the error you get, but I think createLink() is only for actual anchor elements (a) which is the case for MenuItem and Link but not for table rows (as rows may contain interactive elements they can't be links).

Maybe you can create a custom Row component that accepts the relevant router props (see ValidateNavigateOptions), then renders the Row component of RAC and passes an onAction callback that triggers navigation via TanStack Router's useNavigate() hook.

[depsimon]

That would make sense.

I think the custom Row with onAction should work, I wonder what's the difference with the "classic" RouterProvider approach?

My current solution is to implement the RouterProvider which makes the href work everywhere (I'm still using createLink for the MenuItem & Link).

Do you see any downside to this?

With Tanstack Router it looks like this:

<RouterProvider
  navigate={(value) => navigate({ ...value })}
>
  <Outlet />
</RouterProvider>


declare module "react-aria-components" {
  interface RouterConfig {
    href: ToOptions;
  }
}

The advantage I see is that it'll make every RAC components work out of the box without having to scramble the custom components (e.g. when you use a UI kit & don't want to mess with the types of all components)

[rothsandro]

I could be wrong but I think ToOptions isn't fully type-safe, for example you can pass { to: "/items/$id" } but it doesn't enforce the corresponding params.

[depsimon]

That's a good point, I didn't even notice. Switched to the ValidateNavigateOptions to get type safety back :)

Too bad we can't use that at the RouterProvider level