#Navigate to the same route but change the route param

17 messages · Page 1 of 1 (latest)

drowsy mantle
#

Hello, is it possible to change the route param? My use case is, I have something like:
/$companyId/settings
/$companyId/users
/$companyId/files
What I want is to add a select on the page so at any moment the user can choose another company to see the details, so I want to implement a generic way to change the route param for the current route, how can I do that?

hybrid jacinth
#

Not sure if you have completed this, but I think you would have like a select or whatever, to change the companyID, and on selection you would navigate to 1/settings you would need to push to that /settings page and so on

visual basalt
#

You can use navigate() and only pass path params to change.

drowsy mantle
#

I didn't notice that I could pass only params without the to, thank you @visual basalt, that's exactly what I want.
@hybrid jacinth The option that Tanner gave me solved the problem, but thank you as well.

drowsy mantle
#

I found now that navigate without to does not change the params, is that a bug?
nvm, my bad.

slow steeple
#

<@&1156977987980361828> is there a good way to call the navigate with only the path params without TS complaining becase it cannot infor the supported path params for the current route?

If I use navigate({ params: { companyId: value }}); it complains that Object literal may only specify known properties, and companyId does not exist in type

If I use navigate({ params: (prev) => ({...prev, companyId: value })}); it complains that the { companyId: string } is not assignable to type never

Thanks in advance for the help (and great tool).

slow steeple
# visual basalt Supply a from property

Isn't that basically the same as providing a to? I need to know the route path to be able to have the correct type, using a from /$companyId navigates to it instead of keeping the current path (e.g. /$companyId/users).

I could only make it work using a path obtained from the mathes (should also work with the from):

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

navigate({to, params: { companyId });
stray igloo
#

can you please provide a complete minimal example ?

slow steeple
slow steeple
#

@stray igloo was the example clear enough? Any suggestion on what is the correct approach here?
Thanks in advance.

stray igloo
#

can you please create a GitHub issue to properly track this?

slow steeple
winter bay
# slow steeple Sure, here is an example with the problem: https://stackblitz.com/edit/tanstack-...

Checked out this issue and with the latest versions, the runtime behaviour is correctly working.

We've always maintained that you need to supply from or to to actually get type-safety.

The issue is that without the from or to, when you are making an update to the params, you are kind of going in blind, where the router has figure out the current route to selectively update the params. This works during runtime, but doesn't work for the types.

@stray igloo @mild vortex When no from and to are supplied and you try to call navigate, what's the behaviour we expect to happen? It seems like something that'd slow down tsc.

mild vortex
#

Yeah, we want to try to make it explicit where you're opting out of type safety. TypeScript is completely in the dark if you don't provide either of these but there are explicit opt outs like to='.'

slow steeple
#

In this scenario, using the to='.' does not work as the new parameter value is not applied at all. I have added that example as well for completeness.

stray igloo
#

so it is a runtime bug then?