Clicking a link updates the URL put doesn't reload the page

Question

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:

https://123-movies.gy/tv/batman-beyond-39206.63720

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[^]
And
An Example of URL Rewriting With ASP.NET[^]

Posted 19-Nov-21 4:31am

deXo-fan

Updated 19-Nov-21 4:37am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Chris Copeland · Accepted Answer · 2021-11-19T04:37:00

Solution 1

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:

React[^]
Angular[^]
ExpressJS[^]

Posted 19-Nov-21 4:37am

Chris Copeland

Comments

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