diff --git a/ignite-html-router.js b/ignite-html-router.js
index 9b81b76..190072a 100644
--- a/ignite-html-router.js
+++ b/ignite-html-router.js
@@ -55,16 +55,22 @@ IgniteTemplate.prototype.route = function(routes, showCallback = null, hideCallb
}
};
- //Create a managed callback
- var managed = new IgniteCallback(update, () => {
- window.removeEventListener("pushstate", managed.callback);
+ //Create a managed push & pop callback
+ var managedPush = new IgniteCallback(update, () => {
+ window.removeEventListener("pushstate", managedPush.callback);
});
- //Register our callback to the route event.
- window.addEventListener("pushstate", managed.callback);
+ var managedPop = new IgniteCallback(update, () => {
+ window.removeEventListener("popstate", managedPop.callback);
+ });
- //Add the managed callback to our template so that upon deconstruction our callback is destroyed correctly.
- this._callbacks.push(managed);
+ //Register our push & pop callbacks.
+ window.addEventListener("pushstate", managedPush.callback);
+ window.addEventListener("popstate", managedPop.callback);
+
+ //Add the managed callbacks to our template so that upon deconstruction our callback is destroyed correctly.
+ this._callbacks.push(managedPush);
+ this._callbacks.push(managedPop);
//Create a constructor callback that will update the state upon first load.
this._constructors.push(update);
@@ -294,6 +300,11 @@ class Router {
Router.states.pop(); //Pop the current state.
Router.navigate(Router.states.pop(), null, refresh); //Navigate to the previous state.
} else {
+ //Pop the current state, otherwise it can be used to go back but we don't want that.
+ if (Router.states.length > 0) {
+ Router.states.pop();
+ }
+
if (fallback) {
Router.navigate(fallback, null, refresh);
} else {