Creating Links with has routing and search
Our react + typescript SPA needs to use hash routing. We are also using search parameters for a variety of reasons. When I using the <Link> component it does not create a properly formatted target URL. For example, I have a route
/shipping which ends up translated to /#/shipping when we enable hash routing. In certain cases, we want a search param of shipmentId in the URL. When using hash routing, it seems that the search params have to come before the has in order to get properly extracted by URL parsing logic. Therefore, /#/shipping?shipmentId=79 does not work, the path has to be ?shipmentId=79#/shipping. But when I use <Link> with to="/shipping" and search={shipmentId: 79} TanStack router does not create a properly formatted URL. Any thoughts here?6 Replies
foreign-sapphire•16mo ago
are you on the latest router version ?
if no, please upgrade
if yes, please provide a complete minimal example by forking one of the existing router examples on stackblitz
generous-apricotOP•16mo ago
@Manuel Schiller Yes, latest version shows the bug. Here is a repro case using one of your examples: https://stackblitz.com/edit/tanstack-router-m8g5ez?file=src%2Froutes%2Fposts.index.tsx
Click on posts and you'll see that the URL contains a query parameter
year=2023 - but the browser query parsing does not detect it. If you put the ?years=2023 before the hash - it works. Therefore, it seems that TSR is creating invalid Links when using hash routing and query parameters.Chris Edgington
StackBlitz
Router Basic File Based Example (forked) - StackBlitz
Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz
foreign-sapphire•16mo ago
you need to use router properly
see https://stackblitz.com/edit/tanstack-router-vqb6uz?file=src%2Froutes%2Fposts.index.tsx
Manuel Schiller
StackBlitz
Router Basic File Based Example (forked) - StackBlitz
Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz
foreign-sapphire•16mo ago
Search Params | TanStack Router React Docs
Similar to how TanStack Query made handling server-state in your React applications a breeze, TanStack Router aims to unlock the power of URL search params in your applications.
Why not just use URLSearchParams?
generous-apricotOP•16mo ago
Ahhh, thank you - so basically when using TSR I need to use its methods for getting anything out of the full URL, no browser methods?
foreign-sapphire•16mo ago
in case of hash history yes
i would use them always, otherwise you won't get strict typing