Nerd For Tech
Published in

Nerd For Tech

Synchronize the browser ‘Go back’ button and ‘Go back’ button on the page.

Currently, SPA is very popular. If we think about it is better for the user experience. Instead of updating the page every time and getting slightly different data over and over again. We make a small request and update a tiny piece of the UI.

But sometimes some SPA has too many different parts of the UI on a single page. It could give the user the wrong idea that he changed the URL. It is not a big deal until the user presses on the “go back” or “go forward” buttons. After that, the user does not understand what happened. Probably, a lot of developers solve this issue by adding their own “go back” button on the page. It works pretty well. I think the best solution is to synchronize the “go back” button in the browser and the “go back” button on the page. In this way it does not matter which button the user chooses to click. The user will get the same result.

How can we synchronize SPA and browser history? We have access to object window.history. We can not get the URL but we use methods: back, forward and pushState.

The most interesting for us is a method push state. By using this method we can add a new URL into browser history.

The main idea of SPA is that we use the same page. What are we gonna write into browser history? We will use the query parameters to write the state of SPA. Imagine on our page we have 3 tabs. Every time when a user changes tabs we will add a new URL with different query parameters.

Enough theory, let’s make an example. We will make a tiny page with two buttons “go back”, “add new URL” and one input field to set a query parameter.

We fill an input for the query parameter. By pressing on the “Add URL” button, we create a new URL and save it in browser history. One important thing, in the constructor we subscribe to route changes. This subscription will notify us when we press a “go back” button.

If you need to take a close look at the project here is the link.

Originally published at http://tomorrowmeannever.wordpress.com on November 10, 2021.

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yurii K

Full-stack developer. In my work, I use Angular and C#. In my free time I write articles for my blog.