foreign-sapphire

Navigate to the same route but change the route param

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?

16 Replies

wise-white•17mo ago

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

fair-rose•17mo ago

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

foreign-sapphireOP•17mo ago

I didn't notice that I could pass only params without the to, thank you @Tanner Linsley, that's exactly what I want. @Enyel The option that Tanner gave me solved the problem, but thank you as well. ~~I found now that navigate without to does not change the params, is that a bug?~~ nvm, my bad.

adverse-sapphire•13mo ago

@Tanner Linsley 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).

fair-rose•13mo ago

Supply a from property

adverse-sapphire•13mo ago

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 });

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

navigate({to, params: { companyId });

conscious-sapphire•13mo ago

can you please provide a complete minimal example ?

adverse-sapphire•13mo ago

Sure, here is an example with the problem: https://stackblitz.com/edit/tanstack-router-xlb7ip?file=app%2Fcomponents%2FNextUserNavigator.tsx

Tiago Pocinho

StackBlitz

Router Start Basic Example (forked) - StackBlitz

Run official live example code for Router Start Basic, created by Tanstack on StackBlitz

adverse-sapphire•13mo ago

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

conscious-sapphire•13mo ago

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

adverse-sapphire•13mo ago

Sure, I will create one

flat-fuchsia•13mo ago

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. @Manuel Schiller @Chris Horobin 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.

other-emerald•13mo ago

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='.'

adverse-sapphire•13mo ago

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.

conscious-sapphire•13mo ago

so it is a runtime bug then?

adverse-sapphire•12mo ago

I missed you message. It depends, if the solution is not to pass a to or a from, then it is a TS issue, if the solution is to pass a to or a from, then it is a runtime issue.

Gaming

Programming

Navigate to the same route but change the route param

Did you find this page helpful?