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?
#Creating Links with has routing and search
empty vector
waxen ether
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
empty vector
@waxen ether 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.
waxen ether
you need to use router properly
see https://stackblitz.com/edit/tanstack-router-vqb6uz?file=src%2Froutes%2Fposts.index.tsx
empty vector
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?
waxen ether
in case of hash history yes