Fix issue with history when using browser's back button.

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte Router changelog
 
+## 5.8.2
+
+Fix issue with history when using browser's back button.
+
 ## 5.8.1
 
 Improve handling of href links.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-router-spa",
-  "version": "5.8.1",
+  "version": "5.8.2",
   "description": "A full featured router component for Svelte and your Single Page Applications.",
   "main": "src/index.js",
   "svelte": "src/index.js",
@@ -15,10 +15,10 @@
   "license": "MIT",
   "devDependencies": {
     "chai": "^4.2.0",
-    "eslint": "^7.14.0",
+    "eslint": "^7.15.0",
     "mocha": "^8.2.1",
     "mocha-jsdom": "^2.0.0",
-    "svelte": "^3.30.0"
+    "svelte": "^3.31.0"
   },
   "dependencies": {
     "url-params-parser": "^1.0.3"

src/router/current.js

@@ -6,9 +6,9 @@ function RouterCurrent(trackPage) {
   const trackPageview = trackPage || false
   let activeRoute = ''
 
-  function setActive(newRoute) {
+  function setActive(newRoute, updateBrowserHistory) {
     activeRoute = newRoute.path
-    pushActiveRoute(newRoute)
+    pushActiveRoute(newRoute, updateBrowserHistory)
   }
 
   function active() {
@@ -40,11 +40,14 @@ function RouterCurrent(trackPage) {
     }
   }
 
-  function pushActiveRoute(newRoute) {
+  function pushActiveRoute(newRoute, updateBrowserHistory) {
     if (typeof window !== 'undefined') {
       const pathAndSearch = pathWithQueryParams(newRoute)
 
-      window.history.pushState({ page: pathAndSearch }, '', pathAndSearch)
+      if (updateBrowserHistory) {
+        window.history.pushState({ page: pathAndSearch }, '', pathAndSearch)
+      }
+      // Moving back in history does not update browser history but does update tracking.
       if (trackPageview) {
         gaTracking(pathAndSearch)
       }

src/spa_router.js

@@ -41,10 +41,10 @@ function SpaRouter(routes, currentUrl, options = {}) {
    * Redirect current route to another
    * @param destinationUrl
    **/
-  function navigateNow(destinationUrl) {
+  function navigateNow(destinationUrl, updateBrowserHistory) {
     if (typeof window !== 'undefined') {
       if (destinationUrl === NotFoundPage) {
-        routerCurrent.setActive({ path: NotFoundPage })
+        routerCurrent.setActive({ path: NotFoundPage }, updateBrowserHistory)
       } else {
         navigateTo(destinationUrl)
       }
@@ -53,13 +53,13 @@ function SpaRouter(routes, currentUrl, options = {}) {
     return destinationUrl
   }
 
-  function setActiveRoute() {
+  function setActiveRoute(updateBrowserHistory = true) {
     const currentRoute = findActiveRoute()
     if (currentRoute.redirectTo) {
-      return navigateNow(currentRoute.redirectTo)
+      return navigateNow(currentRoute.redirectTo, updateBrowserHistory)
     }
 
-    routerCurrent.setActive(currentRoute)
+    routerCurrent.setActive(currentRoute, updateBrowserHistory)
     activeRoute.set(currentRoute)
 
     return currentRoute
@@ -86,15 +86,16 @@ function localisedRoute(pathName, language) {
  * Updates the current active route and updates the browser pathname
  * @param pathName String
  * @param language String
+ * @param updateBrowserHistory Boolean
  **/
-function navigateTo(pathName, language = null) {
+function navigateTo(pathName, language = null, updateBrowserHistory = true) {
   pathName = removeSlash(pathName, 'lead')
 
   if (language) {
     routerOptions.langConvertTo = language
   }
 
-  return SpaRouter(userDefinedRoutes, 'http://fake.com/' + pathName, routerOptions).setActiveRoute()
+  return SpaRouter(userDefinedRoutes, 'http://fake.com/' + pathName, routerOptions).setActiveRoute(updateBrowserHistory)
 }
 
 /**
@@ -131,8 +132,8 @@ if (typeof window !== 'undefined') {
 
   window.onpopstate = function (_event) {
     let navigatePathname = window.location.pathname + window.location.search + window.location.hash
-
-    navigateTo(navigatePathname)
+    console.log('here we are')
+    navigateTo(navigatePathname, null, false)
   }
 }
 

test/spa_router.test.js

@@ -22,6 +22,28 @@ function thisIsTrue() {
 }
 
 describe('Router', function () {
+  describe('When there are no routes defined and update browser history is false', function () {
+    beforeEach(function () {
+      testRouter = SpaRouter([], pathName).setActiveRoute(false)
+    })
+
+    it('should set the component', function () {
+      expect(testRouter.component).to.be.undefined
+    })
+
+    it('should set the route name to 404', function () {
+      expect(testRouter.name).to.be.undefined
+    })
+
+    it('should set the route path to 404', function () {
+      expect(testRouter.path).to.be.undefined
+    })
+
+    it('should not update history', function () {
+      expect(global.window.history.state).to.be.null
+    })
+  })
+
   describe('When there are no routes defined', function () {
     beforeEach(function () {
       testRouter = SpaRouter([], pathName).setActiveRoute()
@@ -1595,7 +1617,7 @@ describe('onlyIf', function () {
       ]
 
       pathName = 'http://web.app/admin'
-      SpaRouter(routes, pathName).setActiveRoute()
+      SpaRouter(routes, pathName).setActiveRoute(true)
     })
 
     it('should render admin', function () {