router icon indicating copy to clipboard operation
router copied to clipboard

Open in new tab doesn't work with hash router

Open ronaldruzicka opened this issue 2 years ago • 0 comments

Describe the bug

When using hash router there are couple of bugs.

  1. cmd+click which opens a link in a new tab doesn't work properly
  • it removes the # from the url
  • e.g. i have this url https://fr7v18.csb.app/#/posts/1 and with cmd + click on another post it opens https://fr7v18.csb.app/posts/2, but it should be https://fr7v18.csb.app/#/posts/2, the # sign is missing
  • then when you click on a link (posts in navigation) it messes up the url to https://fr7v18.csb.app/posts/2#/posts, it adds #/posts at the end, but the url should be https://fr7v18.csb.app/#/posts
  1. When you modify the url in the browser, it doesn't redirect to that url, only after a refresh
  • it correctly shows an active link but the content doesn't change, only after refresh

Your Example Website or App

https://codesandbox.io/s/react-location-basic-with-hash-forked-wqxkpn

Steps to Reproduce the Bug or Issue

  1. Open sandbox
  2. cmd + click on posts link in the navigation, it opens in another tab
  3. It should already have a # sign after posts but it doesn't
  4. Clear the url of the # and click again on a post navigation link
  5. url should be correct /#/posts
  6. cmd + click on post 1, it should open on another tab
  7. url should be /#/posts/1, but is instead /posts/1, it loses the #`
  8. Go back to /#/posts/1 url and manually change it to the second post /#/posts/2
  9. The content sometimes changes on first change, but on another one it doesn't, but the active link does (getActiveProps makes it bold)

Expected behavior

  1. Opening url on a new tab should keep the # in the url, when using hash router
  2. Manually changing the url should open given page without the need for refresh
  3. Both cases are working in react-router, it would be great if it worked in react-location as well

Screenshots or Videos

https://user-images.githubusercontent.com/20684387/180937514-148b4412-31c5-4ee1-ace3-f53722664be5.mov

Platform

  • OS: macOS, Windows, Linux
  • Browser: Chrome, Safari, Firefox
  • Version: latest

Additional context

No response

ronaldruzicka avatar Jul 26 '22 06:07 ronaldruzicka