window.onpopstate event state null on second back button

I am using this to change the URL and push to the history stack:

history.pushState({ }, null, url);

It works. Then, I implement reload on pop:

window.onpopstate = function (e) {
    if (e && e.state) {
        location.reload();
    }
}

It works on the first back button and reloads the page. However, when it reloads the page, push state history seems to be gone. When I try to go back again, it fails as e.state is null. There appears to be a similar problem at window.history.state becoming null, what all could be possible cases making it null or changing its state on browser back? (though I'm not sure if it's the same thing) without a solution.

One may ask "why not just reload on every pop, without the if statement?". This is not possible as onpopstate is also called on my AJAX calls, popups etc at many places on the page, also with e.state being null, and I shouldn't reload on such scenarios. That's when I'm pushing an extra empty object on push.

As another approach, I've tried passing the whole document (document.documentElement.innerHTML) into the state as a variable and then checking for that variable and restoring from it if it exists, but it messes up my whole DOM too, so I've abandoned it.

How can I make back and forward buttons work, without breaking anything that also calls onpopstate?