Click here to Skip to main content
15,878,231 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more: , +
Hi all,

I see this on more and more websites: you click a link and the URL in the browser becomes whatever the href-part of the link is set to, but the browser doesn't reload the page. I know how this can be done with JavaScript, but that doesn't look to be the case here:

Try clicking on a different episode and see the numbers at the end of the URL change.

How do they accomplish this? When I look at the HTML code it looks like it's just a regular a href-link - the kind that would normally reload the whole page. And when I said I know how to do it with JavaScript, that's not entirely accurate, because when I do that I simply add a click event-listener to a button (or anything other than an a-href-link) and I can only update GET-query headers (the stuff after the ? in the URL).

Can it be done with just HTML? If not, what would be a simple JavaScript example?

What I have tried:

I tried looking at three different questions/articles on this site.

Update data when user clicks a link, but without the page getting refreshed/posted back[^]
update browser url without reload[^]
An Example of URL Rewriting With ASP.NET[^]
Updated 19-Nov-21 4:37am

1 solution

What you're observing is a something called Javascript Routing[^]. JS now has a way to intercept changes in the URL and action changes on the screen accordingly.

Popular frontend JS frameworks support routing, such as:

Share this answer
deXo-fan 21-Nov-21 2:25am    
Hi Chris!
Thank you for your answer, it is exactly what I was looking for!
However, I am still a little confused about the whole concept. Let me try to explain:

If we use the site I linked to as an example, then I guess the only benefit they reap by using JavaScript routing is that you can also select a specific episode by specifying the episode number in the URL in your browser before you enter the site? In other words, with JS routing there are two ways to choose an episode:
1) Type its URL in the address bar in the browser, then enter the site
2) Enter the site, then click a link to an episode

Where as if you don't use JS routing or links but simply add click event handlers to e.g. buttons, then to watch a specific episode you only have the second option:
2) Enter the site, then click a button

Is that correct? I'm asking because if JavaScript can learn the URL the moment the page loads (the ENTIRE URL, which I believe it can?), then what advantage does JS routing give you exactly that the button solution doesn't have? What good is it that the URL in the address bar changes? How does it help the user and how does it make life easier for the developer?
Chris Copeland 22-Nov-21 4:20am    
Yes Javascript routing can detect the path of the URL when the page is loaded, so having something like /view/episode-1-some-title/ would be loaded correctly.

I suppose the main benefit of this is distribution and sharing? Imagine if someone opened a product page and wanted to share it with their friends or partner as a suggested present for Christmas, they will typically take the URL from the browser and send it across. Without this functionality in the URL, they'd have to give detailed instructions to find the correct page. And if they wanted to bookmark the page, well that would be impossible if the URL wasn't constructed properly.

Search engines also struggle a little bit at the moment with SPAs, though they're making best efforts to try and improve their indexing engines. If the entire application was locked behind button presses however, that would become impossible to index.
[no name] 6-Apr-23 17:23pm    
Thanks for sharing that solution, is really helpufl

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900