compatible-crimson

Should all path params be required for relative navigation?

I have my routes setup like the following: /customers/$customerId/ (customerRoute) /customers/$customerId/orders/$orderId (customerOrderRoute) When I try to navigate from the first route using a <Link from={customerRoute.fullPath} to="orders/$orderId" params={{orderId: "123"}}>, I'm getting an error that customerId is required.

10 Replies

compatible-crimsonOP•2y ago

So I think the solution here is to pass a callback for params, according to the docs the current params will be passed into the callback:

params={(prevParams) => ({...prevParams, orderId: "123"})}

params={(prevParams) => ({...prevParams, orderId: "123"})}

In order to preserve the customerId. Seems a bit odd to have to do it that way, and I feel like that defeats the purpose of relative routing, but I guess it works.

protestant-coral•2y ago

Hmmm, that's interesting. It likely worked using the callback method, since it then knows that customerId is defined in the prevParams. Its likely because the callback approach merges the data being committing, whilst the initial approach tried to commit it immediately.

compatible-crimsonOP•2y ago

Agreed, but I feel that the advantage of relative pathing is that I don't need to specify the path parameters again, so I guess my question is, is this a bug or is it just not built that way?

protestant-coral•2y ago

@Manuel Schiller what do you think about this?

absent-sapphire•2y ago

@Nick Harris can you please provide a minimal example? The reason I ask is that relative navigation seems to be broken (See also https://github.com/TanStack/router/issues/1066) I just tried to reproduce your route setup and I get

Object literal may only specify known properties, and 'fooId' does not exist in type '(current: {} & { invoiceId: number; }) => never'.ts(2353)

GitHub

Issues · TanStack/router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - Issues · TanStack/router

compatible-crimsonOP•2y ago

Yeah, let me try reproduce it in a standalone project

absent-sapphire•2y ago

I have a fix for this: https://github.com/TanStack/router/pull/1163 this makes path params optional that exist in the from route this needs further testing of potential side effects though. @Sean Cassiere please have a look

GitHub

fix: when navigating, make path params optional that already exist ...

protestant-coral•2y ago

Yea, if the from props is provided, then it makes sense for the params to be optional since we can assume they either want the existing ones or want to merge'n'replace with new ones. Is this the same logic being used with useNavigate already?

absent-sapphire•2y ago

useNavigate and Link use the exact same typing so currently, both require you to specify all params also in relative routing with my PR, both will make the existing params optional

absent-sapphire•2y ago

released in https://github.com/TanStack/router/releases/tag/v1.15.23

GitHub

Release v1.15.23 · TanStack/router

Version 1.15.23 - 2/8/2024, 6:15 PM Changes Fix when navigating, make path params optional that already exist in the from route (#1163) (92923cc) by Manuel Schiller Packages @tanstack/react-rout...

Gaming

Programming

Should all path params be required for relative navigation?

Did you find this page helpful?