javascript – Change url without reloading the page

Question:

Hello. I came across a URL change in insta, but the page does not reload. If you copy the URL to another window, but the infa is also loaded.

I suppose this is something like this: when you click on a link, I cancel the default action, copy its href to location.hash , and load the ajax'ом , and if the user's browser does not support location.hash , then I simply do not cancel the default action when clicked on the link, and the person follows it.

Does this assumption take place? or are there more concise options?

Answer:

<div class="link-group">
    <a class="route" href="/orange">orange</a>
    <a class="route" href="/tomato">tomato</a>
</div>
<script>
    document.body.querySelectorAll('.route')
        .forEach( link => link.addEventListener('click', link_clickHandler) );

    function link_clickHandler( event ){
        event.preventDefault();

        let path = event.target.href;

        window.history.pushState({route: path}, "some title", path);
    }

    window.addEventListener('popstate', window_popStateHandler);

    function window_popStateHandler( event ){
        if(event.state){
            console.log(event.state)
        }

        console.log(event);
    }
</script>

Here is the minimum code required to create a client router. Unfortunately, in the sandbox native to SO, it will not work, and in the browser, if loaded from a local file, probably too, but it works with the server.

What happens in the code –

  1. all links leading to a change in url are marked with the route class or in any other way.
  2. when loading js, the first thing to do is to select all links and subscribe them to the click event.
  3. in the click event handler, call event.preventDefault() to prevent the default behavior of link firing which will cause the page to reload.
  4. using the History api, we put data about the current path and indicate the same url that we would like to see in the status bar. (one)
  5. ajax data with ajax and display it.
  6. it is worth understanding that urls, although they look beautiful, like real ones, that is, without #shesh lattice, in fact, are not. If you go to the page http://localhost:8080 change the address to http://localhost:8080/orange , then everything will work correctly. But by going directly to the address http://localhost:8080/orange you will receive a 404 error, since in reality such an address does not exist. To do this, the server must always send the index.html page for absolutely any request. Then, by going to the address http://localhost:8080/orange browser code of the client router, which in turn recognizes the url and continues to work as usual, collecting and downloading data according to the specified rules. It is also worthwhile to understand that it is the client router that should show the 404 page, since only he knows which pits exist and which do not.
  7. Well, it's worth adding that in an isomorphic application, almost everything is happening, except that when you enter the client part of the router, it runs on the server and the already rendered markup is placed in index.html .
Scroll to Top