Links with hash are not triggering popstate events #4905
Description
🐛 bug report
Preflight Checklist
- I have read the Contributing Guidelines for this project.
- I agree to follow the Code of Conduct that this project adheres to.
- I have searched the issue tracker for an issue that matches the one I want to file, without success.
Description of the problem
Anchors with relative links like #foo usually trigger the popstate event on window but it seems as if they were prevented so they don't propagate to any listener added by the user. They also do not trigger when navigating through history when they normally do.
How has this issue affected you? What are you trying to accomplish?
This breaks any client side routing using the history api. Vue Router in my case.
To Reproduce
Link to sandbox: link
- Click on the links in order
- Navigate back and forward with history
You will see that only the navigations made with pushState trigger the popstate. But all them trigger a popstate in a regular page.
Your Environment
| Software | Name/Version |
|---|---|
| Сodesandbox | client |
| Browser | Chrome 85 |
| Operating System | OSX |
Other
I don't know if it's related but noticed this line
window.history.replaceState({}, '', sandboxUrl({ id, alias, git }));It should be
window.history.replaceState(window.history.state, '', sandboxUrl({ id, alias, git }));To preserve any existing state pushed by the user.
I remember there was https://github.com/codesandbox/codesandbox-client/blob/master/packages/sandbox-hooks/url-listeners.js#L117 to work in vue-router. And we could add el.__vnode (double underscore) to make it work with Vue 3 (and that would be great already!), but I'm opening this issue in case you seek to find a long term alternative