Typescript issue when navigating without passing the to

[fernion]

Which project does this relate to?

Router

Describe the bug

Considering a route like:
/users/$userId/details
/users/$userId/posts
/dummy/$dummyId

If we have a component that is used in the users routes that knows how to navigate to a different user, keeping the current location (details or posts),
then we can use the navigate returned from useNavigate to do so. It was suggested not to provide a to to have this working properly, and it works but Typescript complaints:

• with navigate({ params: { userId: value }}); it complains that Object literal may only specify known properties, and userId does not exist in type
• with navigate({ params: (prev) => ({...prev, userId: value })}); it complains that the { userId: string } is not assignable to type never

Using the from or the to, parameters solves the typescript issue, but we need to use a specific route otherwise we lose the current location,

One possibility is to use, but it might be overcomplicating the solution.

const matches = useMatches();
const to = matches[matches.length - 1].fullPath;

navigate({to, params: { userId: value });

This issue is a followup of the discussion on Discord

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-xlb7ip?file=app%2Fcomponents%2FNextUserNavigator.tsx

Steps to Reproduce the Bug or Issue

Use navigate to change only one parameter keeping any sub-route.

Expected behavior

A cleaner way to change only the parameter without TS complaints.

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: Chrome
• Version: 130

Additional context

No response

[SeanCassiere]

Edit: Ignore everything in this comment because, upon retesting with the latest versions of the packages, the runtime behaviour mentioned here has been resolved. See sandbox - https://stackblitz.com/edit/tanstack-router-gqwptx?file=app%2Fcomponents%2FNextUserNavigator.tsx

---

Just so I'm clear on the issue at hand here.

In this configuration, the type error goes away when setting the from value to /users/$userId/details during the navigate call, but it exits the sub-route as a whole.

Whereas, when I used this modified configuration of having the from value be added onto useNavigate hook, it fixes the navigation whilst giving you the correct types.

TLDR; So what we are looking to fix here is only the runtime behaviour right?

---

Also, for clarity on the PR, this also works.

[fernion]

Just to clarify that the problem with the solution of not passing a to or a from, it is not a runtime issue, but a TypeScript one. On your example we can see:

The TS error is:

Object literal may only specify known properties, and 'userId' does not exist in type 'ParamsReducerFn<Router<RootRoute<undefined, {}, AnyContext, AnyContext, {}, undefined, RootRouteChildren, FileRouteTypes>, TrailingSlashOption, boolean, Record<...>, Record<...>>, "PATH", string, string | undefined>'.(2353)

link.d.ts(65, 5): The expected type comes from property 'params' which is declared here on type 'NavigateOptions<Router<RootRoute<undefined, {}, AnyContext, AnyContext, {}, undefined, RootRouteChildren, FileRouteTypes>, TrailingSlashOption, boolean, Record<...>, Record<...>>, string, string | undefined, string, "">'

(property) userId: string