CODEWITHSUNDEEP
javascriptgatsbyreach-router
bkoodaa
bkoodaa

Reputation: 5322

Modify current URL (Gatsby / Reach Router)

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.

Upvotes: 1

Views: 1244

Answers (2)

Sydney Y
Sydney Y

Reputation: 3152

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()

Upvotes: 1

Austin
Austin

Reputation: 11

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.

Upvotes: 0

Related Questions