1

Question: Is it possible to modify the current URL that's shown in browser's address bar and browser history?

To be specific, I only want to modify the URL that is visible to the user; I don't want to trigger navigation. (I have a Gatsby app, and Gatsby is using Reach Router.)

Motivation: I have a gallery of images that the user can click and navigate to URL such as /images/?id=52. The advantage of this approach is that /images/ can be prefetched to enable instant rendering of the page. However, this scheme is unfriendly to users who have disabled JS, as they will see no images at all when they navigate with query parameters. So I have also prerendered pages like /images/52/ that work without JS. So what I want to do is navigate the JS users with query parameters, but then modify the URL that they see to a URL that can be shared with anyone including non JS users.

Atte Juvonen
  • 4,922
  • 7
  • 46
  • 89
  • I don't think you can/should try to break the linkage between the browser url and the SPA routing. Better to make the js routing work without query params imo. – Will Jenkins Jul 13 '19 at 19:33
  • It doesn't appear to be possible to get instant renders for image pages without the use of query params (because you have to prefetch a different route for each image, rather than a single route). – Atte Juvonen Jul 13 '19 at 19:44

2 Answers2

1

What I think you're looking for is either window.location.replace() or window.location.assign()

Replace is merely visual, so if the user were to copy the URL to share with their friends you can manipulate that url that they see and copy.

Assign loads a new document, as if the URL you passed it is the one that got the document.

https://developer.mozilla.org/en-US/docs/Web/API/Location/replace

https://developer.mozilla.org/en-US/docs/Web/API/Location/assign

Edit: a comparison

Difference between window.location.assign() and window.location.replace()

Sydney Y
  • 2,912
  • 3
  • 9
  • 15
0

I believe you'll need to create a NodeJs server to handle this sort of action. It can take a query parameter from the URL ('images/?id=52') and then return the user to the URL 'images/52'.

Or you may be able to use the 'gatsby-source-filesystem' package.

Austin
  • 11
  • 2