Merge pull request #2425 from taion/dynamic-indexRoute

isActive for dynamic index routes

Author: knowbody

modules/__tests__/isActive-test.js

@@ -297,4 +297,45 @@ describe('isActive', function () {
       })
     })
   })
+
+  describe('dynamic routes', function () {
+    const routes = {
+      path: '/',
+      childRoutes: [
+        { path: 'foo' }
+      ],
+      getIndexRoute(location, callback) {
+        setTimeout(() => callback(null, {}))
+      }
+    }
+
+    describe('when not on index route', function () {
+      it('does not show index as active', function (done) {
+        render((
+          <Router history={createHistory('/foo')} routes={routes} />
+        ), node, function () {
+          expect(this.history.isActive('/')).toBe(true)
+          expect(this.history.isActive('/', null, true)).toBe(false)
+          expect(this.history.isActive('/foo')).toBe(true)
+          done()
+        })
+      })
+    })
+
+    describe('when on index route', function () {
+      it('shows index as active', function (done) {
+        render((
+          <Router history={createHistory('/')} routes={routes} />
+        ), node, function () {
+          // Need to wait for async match to complete.
+          setTimeout(() => {
+            expect(this.history.isActive('/')).toBe(true)
+            expect(this.history.isActive('/', null, true)).toBe(true)
+            expect(this.history.isActive('/foo')).toBe(false)
+            done()
+          })
+        })
+      })
+    })
+  })
 })

modules/isActive.js

@@ -66,16 +66,12 @@ function getMatchingRoute(pathname, activeRoutes, activeParams) {
  * Returns true if the given pathname matches the active routes
  * and params.
  */
-function routeIsActive(pathname, activeRoutes, activeParams, indexOnly) {
-  let route = getMatchingRoute(pathname, activeRoutes, activeParams)
-
-  if (route == null)
-    return false
-
-  if (indexOnly)
-    return activeRoutes.length > 1 && activeRoutes[activeRoutes.length - 1] === route.indexRoute
+function routeIsActive(pathname, location, routes, params, indexOnly) {
+  if (indexOnly) {
+    return location.pathname.replace(/\/*$/) === pathname.replace(/\/*$/)
+  }
 
-  return true
+  return getMatchingRoute(pathname, routes, params) != null
 }
 
 /**
@@ -100,7 +96,7 @@ function isActive(pathname, query, indexOnly, location, routes, params) {
   if (location == null)
     return false
 
-  if (!routeIsActive(pathname, routes, params, indexOnly))
+  if (!routeIsActive(pathname, location, routes, params, indexOnly))
     return false
 
   return queryIsActive(query, location.query)