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 .. 🙏