Description
Which project does this relate to?
Router
Describe the bug
When navigating to a route with a path parameter (or splash) where the value contains a backslash, everything works at first. But when reloading the page or navigating back to the page the path restored from the URL differs from the original URL.
Your Example Website or App
https://stackblitz.com/edit/tanstack-router-yoii3nte?file=src%2Froutes%2Fb.%24postId.tsx
Steps to Reproduce the Bug or Issue
- Open the preview in a new tab (so that you can see the full URL)
- Click one of the "Splat route" or "Path param route" links
- Reload the page
- Observe that the URL changes and the page content changes as well.
Expected behavior
As a user I expect that reloading a page shows the same route and same parameters than before.
Screenshots or Videos
Screen.Recording.2025-04-08.at.15.45.59.mov
Platform
- OS: macOS
- Browser: Chrome
- Version: 135
Additional context
The problem seems to be that after the reload, i.e., during the initial sync with the URL replaceState
is called with the decoded "/b/test[s\%2F.\%2Fparameter]"
as URL. replaceState
turns \
into /
.
This happens because interpolatePath
at https://github.com/TanStack/router/blob/main/packages/router-core/src/router.ts#L1610 is called with "/b/test[s\%2F.\%2Fparameter]"
as pathname
instead of "/b/$postId"
, which is the case during a regular navigation. This would then take care of the escaping. Hence I assume the issue is within resolvePathWithBase
(https://github.com/TanStack/router/blob/main/packages/router-core/src/router.ts#L1567) which returns the pathname
, but I feel like I don't have enough context knowledge to judge at which point exactly the current behavior deviates from the expected behavior.