The instructions for client side routing for Tantsack Router doesn't work.

[MAST1999]

🙋 Documentation Request

Currently, if you implement it as the documentation has explained, you get this error:

To get rid of the error, you can change it to this:

declare module 'react-aria-components' {
  interface RouterConfig {
    href: ToPathOption<RegisteredRouter>;
    routerOptions: Omit<NavigateOptions, keyof ToOptions>;
  }
}

But this makes the href becomes just string, and you get no auto complete.

The way to get autocomplete is doing this:

declare module 'react-aria-components' {
    interface RouterConfig {
        href: ToPathOption<RegisteredRouter, '/', '/'> | ({} & string);
        routerOptions: Omit<NavigateOptions, 'to' | 'from'>;
    }
}

And change the router provider to this:

function RootComponent() {
    const router = useRouter();

    return (
        <RouterProvider
            navigate={(to, options) =>
                router.navigate({
                    ...options,
                    to: to as ToPathOption<RegisteredRouter, '/', '/'>,
                })
            }
            useHref={(to) => {
                return router.buildLocation({ to }).href;
            }}
        >
            <Outlet />
        </RouterProvider>
    )
}

Now you will get auto complete in the links, and you can use any string as well:

This would also enable using the params and search from tanstack/react-router to be typesafe:

But right now since there is no way to constrict them based on the given href they show all the options for all the routes.

I think the way to fix this would be to give RouterConfig a generic string parameter and pass it to ToPathOption but I'm not sure.

declare module 'react-aria-components' {
    interface RouterConfig<Path extends string> {
        href: ToPathOption<RegisteredRouter, '/', Path> | ({} & string);
        routerOptions: Omit<NavigateOptions<RegisteredRouter, '/', Path>, 'to' | 'from'>;
    }
}

I'm not too familiar with how the types are set up for React Aria, but what I'm hoping for is this will link the href value to ToPathOption and NavigateOptions and show the correct values for search and params options.

🧢 Your Company/Team

No response

[MAST1999]

I tried to create a Stackblitz for this but uses an older version of typescript and I can't exactly reproduce it: https://stackblitz.com/edit/tanstack-router-hhpjdc?file=src%2Froutes%2F__root.tsx&preset=node

Had to remove the | ({} & string) since it wasn't working the typescript version Stackblitz is using.

[MAST1999]

Here's an example that is passing the params using the routerOptions: https://stackblitz.com/edit/tanstack-router-hhpjdc?file=src%2Froutes%2F__root.tsx,src%2Froutes%2Fposts.tsx&preset=node

[CHE1RON]

However, an "official" way to handle this would be much appreciated, so I'm bumping this .. 🙏

[levrik]

I played around with the suggested solution by @MAST1999. I needed to do some changes but it's starting to work. routerOptions seems to be typed according to href now but href auto-completion is broken for some reason instead. Still looking into it.

The bigger issue I'm seeing here is that it requires making everything that accepts href and routerOption generic. Also a lot of types in between. I'm unsure if the maintainers of RAC are willing to accept such a PR such for the sake of supporting TanStack Router. I personally went with custom wrapper components for now.

[devongovett]

Looks like the docs would need to be updated. This used to work but there have been some updates to TanStack Router's types that broke it. This should work instead:

import {ToOptions, NavigateOptions} from '@tanstack/react-router';

declare module 'react-aria-components' {
  interface RouterConfig {
    href: ToOptions['to'];
    routerOptions: Omit<NavigateOptions, keyof ToOptions>;
  }
}

You could also consider typing href as an object containing properties like params as well by making href take ToOptions. See https://github.com/adobe/react-spectrum/issues/6587#issuecomment-2224235268.