page.js not working with history back or forward

[Nomia]

Hi, I've used page.js in my project for about a week. Sometimes, page.js will not work with history.back(). The issue is that, when I hit the back button(or manually call history.back) on chrome, the url will change, but the callback doesn't get called. (the URL changes but the route isn't triggered again).

And the history.forward or the forward button on my chrome or any other browser will not trigger the router callback.

I don't know whether it's a problem in my code, I found someone has the same issue with me, not solved.

[Nomia]

@paulocoghi could u help me out?

[paulocoghi]

Are you registering page's popstate / click bindings with:

page()

[Nomia]

yes

[Nomia]

@paulocoghi here is my code:

Page({
        hashbang: true,

        click: false
});

[paulocoghi]

I've seen other users with problems with hashbang mode, with which I am not familiar.

I always used page.js without it.

[Nomia]

Oh, bad news. I have to use hashbang mode, coz it will be hosted natively(file:///).

thanks anyway.

[paulocoghi]

Now I understand better your scenario and I have good news. You are not obligated to use hashbang, even when using file:///

All you have to do in this case is (after defining all your routes):

// Starting routing system with automatic environment discovery, mobile, web or desktop
if( window && ( window.cordova || window.location.protocol == 'file:' ) )
{
    page( { dispatch: false } )
    page( '/' ) // Here you define the route to be loaded first
}
else
{
    page()
}

[paulocoghi]

Do not use click: false or hashbang.

[Nomia]

Thx for ur advice @paulocoghi , I'll give it a shot and feedback here.

[paulocoghi]

Any news?

[ankianan]

You can mentiom popstate:true in configuration of page.

[Nomia]

Sorry for the late feedback. I've handled the history back and forward problem manually in my project before @paulocoghi 's suggestion. Lots of work was in a rush. I'll test the suggested solution once I've got time. Feel free to close this issue.

[WesleyDRobinson]

perhaps an issue with bfcache: https://developer.mozilla.org/en-US/Firefox/Releases/1.5/Using_Firefox_1.5_caching

Adding a pageshow event handler resolves:

window.onpageshow = event => {
    if (event.persisted) window.location.reload()
}

[paulocoghi]

@matthewp , without an response from the OP, I am in favor of closing the issue. If this problem does exist, we need at least one example code in which it occurs in order to work on the case.

[matthewp]

That's fair, let's close. Happy to reopen if we get more info!

[kyle-west]

I am experiencing this too. I have multiple apps mounted at different paths of the same domain. (i.e: /foo is a different express app than /bar) Some apps use PageJS for client-side routing, others do not. When I navigate from an app that uses page to another that does not, and then use the back button to return to the previous app's page, I am experiencing the same behavior.

[kyle-west]

It turns out that adding

<script>
  window.addEventListener('popstate', (e) => {
    if (e.state && e.state.path) {
      window.location.href = e.state.path;
    }
  });
</script>

to the file that does not use PageJS solved the problem for me. I think this works because of reasons stated in the last paragraph of [this section on MDN](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Example_of_pushState()_method)

[paulocoghi]

Thanks for sharing your solution!

Since it is external to PageJS, maybe we can add this to the README