[fixed] tearing down location listeners

when a router component was unmounted, the
locations continued listening, now they are
actually removed

Author: ryanflorence

modules/__tests__/Router-test.js

@@ -970,3 +970,25 @@ describe('Router.run', function () {
   });
 
 });
+
+describe('unmounting', function () {
+  afterEach(function() {
+    window.location.hash = '';
+  });
+
+  it('removes location change listeners', function (done) {
+    var c = 0;
+    var div = document.createElement('div');
+    Router.run(<Route handler={Foo} path="*"/>, Router.HashLocation, function(Handler) {
+      c++;
+      expect(c).toEqual(1);
+      React.renderComponent(<Handler/>, div, function() {
+        React.unmountComponentAtNode(div);
+        Router.HashLocation.push('/foo');
+        // might be flakey? I wish I knew right now a better way to do this
+        setTimeout(done, 0);
+      });
+    });
+
+  });
+});

modules/locations/HashLocation.js

@@ -79,6 +79,26 @@ var HashLocation = {
     _isListening = true;
   },
 
+  removeChangeListener: function(listener) {
+    for (var i = 0, l = _changeListeners.length; i < l; i ++) {
+      if (_changeListeners[i] === listener) {
+        _changeListeners.splice(i, 1);
+        break;
+      }
+    }
+
+    if (window.removeEventListener) {
+      window.removeEventListener('hashchange', onHashChange, false);
+    } else {
+      window.removeEvent('onhashchange', onHashChange);
+    }
+
+    if (_changeListeners.length === 0)
+      _isListening = false;
+  },
+
+
+
   push: function (path) {
     _actionType = LocationActions.PUSH;
     window.location.hash = Path.encode(path);

modules/locations/HistoryLocation.js

@@ -50,6 +50,26 @@ var HistoryLocation = {
     _isListening = true;
   },
 
+  removeChangeListener: function(listener) {
+    for (var i = 0, l = _changeListeners.length; i < l; i ++) {
+      if (_changeListeners[i] === listener) {
+        _changeListeners.splice(i, 1);
+        break;
+      }
+    }
+
+    if (window.addEventListener) {
+      window.removeEventListener('popstate', onPopState);
+    } else {
+      window.removeEvent('popstate', onPopState);
+    }
+
+    if (_changeListeners.length === 0)
+      _isListening = false;
+  },
+
+
+
   push: function (path) {
     window.history.pushState({ path: path }, '', Path.encode(path));
     History.length += 1;

modules/locations/TestLocation.js

@@ -28,6 +28,8 @@ var TestLocation = {
     updateHistoryLength();
   },
 
+  removeChangeListener: function () {},
+
   push: function (path) {
     TestLocation.history.push(path);
     updateHistoryLength();

modules/utils/createRouter.js

@@ -404,6 +404,10 @@ function createRouter(options) {
           // Bootstrap using the current path.
           router.dispatch(location.getCurrentPath(), null, dispatchHandler);
         }
+      },
+
+      teardown: function() {
+        location.removeChangeListener(this.changeListener);
       }
 
     },
@@ -439,6 +443,10 @@ function createRouter(options) {
       this.setState(state);
     },
 
+    componentWillUnmount: function() {
+      router.teardown();
+    },
+
     render: function () {
       return this.getRouteAtDepth(0) ? React.createElement(RouteHandler, this.props) : null;
     },