React router POP

Question

I'm investigating my react application's router actions history, and found that there are many "POP" action that comes right after a "REPLACE" action. I couldn't seem to find more documentation about the "POP" action, what is it? and what does it do?

Is it safe or right to add a validation in my component to validate the location.action in my componentDidUpdate() life cycle?

Solution

Found this article written by Matthew explaining the History API very well:

Returning to a previous page

When you use the pushState() method, you also need to think about its natural counterpart, the onPopState event. While the pushState() method puts a new entry into the browser’s history list, the onPopState event gives you the chance to deal with it when the user returns.

To understand how this works, consider what happens if a visitor steps through all the slides in the Dictionnaire Infernal example. As each new slide is loaded up, the page adds a history entry. But if the user steps back with the Back button, nothing happens.

To fix this shortcoming, you need to handle the onPopState event, which is triggered after every history navigation. (This includes if you use one of the history methods, like history.back(), as well as when the user clicks the browser navigation buttons.)

The onPopState event provides your code with the state information you stored earlier with pushState().

...

If you push, you must pop. The pushState() method and onPopState event are partners. What you put in with one, you get back with the other.