Describe the bug
When calling pushState or replaceState with a first argument that is not the current page's url, subsequent navigations (typically "go back") will lead to unexpected behaviors. In particular, the url in the browser's history will be different from the one used in the load function of a page.
See for example this SO question which explains the bug that led me here: https://stackoverflow.com/questions/77703203/url-is-incorrect-in-load-after-pushstate-and-navigation
I'm not a svelteKit contributor, and am not ready yet to be one, but I think the bug is caused by these lines:
|
[PAGE_URL_KEY]: page.url.href |
|
[PAGE_URL_KEY]: page.url.href |
PAGE_URL_KEY is set to the current page's url while the original history API is called with the new url provided by the user. Changing page.url.href to resolve_url(url).href solved my issue.
Reproduction
https://github.com/AlexisGado/bug-nav-svelte
- go to /page1
- click the button that will push a new state /page1?a=1 and navigate to /page2?a=1
- go back using the browser's button
- browser shows the correct url /page1?a=1 (meaning that the browser history was updated)
- The
load function of page1 runs but the url (logged) is incorrect: /page1
Logs
No response
System Info
System:
OS: macOS 14.0
CPU: (8) arm64 Apple M1
Memory: 59.53 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 21.4.0 - /opt/homebrew/bin/node
npm: 10.2.4 - /opt/homebrew/bin/npm
Browsers:
Chrome: 119.0.6045.123
Safari: 17.0
Severity
serious, but I can work around it
Additional Information
If you know a better way of doing what I was trying to achieve, please feel free to answer the SO question :)
Describe the bug
When calling
pushStateorreplaceStatewith a first argument that is not the current page's url, subsequent navigations (typically "go back") will lead to unexpected behaviors. In particular, the url in the browser's history will be different from the one used in theloadfunction of a page.See for example this SO question which explains the bug that led me here: https://stackoverflow.com/questions/77703203/url-is-incorrect-in-load-after-pushstate-and-navigation
I'm not a svelteKit contributor, and am not ready yet to be one, but I think the bug is caused by these lines:
kit/packages/kit/src/runtime/client/client.js
Line 1617 in acec5e6
kit/packages/kit/src/runtime/client/client.js
Line 1642 in acec5e6
PAGE_URL_KEYis set to the current page's url while the original history API is called with the new url provided by the user. Changingpage.url.hreftoresolve_url(url).hrefsolved my issue.Reproduction
https://github.com/AlexisGado/bug-nav-svelte
loadfunction of page1 runs but the url (logged) is incorrect: /page1Logs
No response
System Info
System: OS: macOS 14.0 CPU: (8) arm64 Apple M1 Memory: 59.53 MB / 8.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 21.4.0 - /opt/homebrew/bin/node npm: 10.2.4 - /opt/homebrew/bin/npm Browsers: Chrome: 119.0.6045.123 Safari: 17.0Severity
serious, but I can work around it
Additional Information
If you know a better way of doing what I was trying to achieve, please feel free to answer the SO question :)