Link: listen to history for active state changes

modules/Link.js

@@ -54,6 +54,46 @@ var Link = React.createClass({
     };
   },
 
+  getInitialState() {
+    var active = this.getActiveState();
+    return { active };
+  },
+
+  trySubscribe() {
+    var { history } = this.context;
+    if (!history) return;
+    this._unlisten = history.listen(this.handleHistoryChange);
+  },
+
+  tryUnsubscribe() {
+    if (!this._unlisten) return;
+    this._unlisten();
+    this._unlisten = undefined;
+  },
+
+  handleHistoryChange() {
+    var { active } = this.state;
+    var nextActive = this.getActiveState();
+    if (active !== nextActive) {
+      this.setState({ active: nextActive });
+    }
+  },
+
+  getActiveState() {
+    var { history } = this.context;
+    var { to, query, onlyActiveOnIndex } = this.props;
+    if (!history) return false;
+    return history.isActive(to, query, onlyActiveOnIndex);
+  },
+
+  componentDidMount() {
+    this.trySubscribe();
+  },
+
+  componentWillUnmount() {
+    this.tryUnsubscribe();
+  },
+
   handleClick(event) {
     var allowTransition = true;
     var clickResult;
@@ -83,21 +123,22 @@ var Link = React.createClass({
   },
 
   render() {
-    var { to, query, onlyActiveOnIndex } = this.props;
+    var { to, query } = this.props;
 
     var props = {
       ...this.props,
       onClick: this.handleClick
     };
 
     var { history } = this.context;
+    var { active } = this.state;
 
     // Ignore if rendered outside the context
     // of history, simplifies unit testing.
     if (history) {
       props.href = history.createHref(to, query);
 
-      if (history.isActive(to, query, onlyActiveOnIndex)) {
+      if (active) {
         if (props.activeClassName)
           props.className += props.className !== '' ? ` ${props.activeClassName}` : props.activeClassName;
 

modules/__tests__/Link-test.js

@@ -225,6 +225,46 @@ describe('A <Link>', function () {
     });
   });
 
+  describe('when route changes', function() {
+    it('changes active state', function(done) {
+      var LinkWrapper = React.createClass({
+        shouldComponentUpdate() {
+          return false;
+        },
+        render() {
+          return (
+            <div>
+              <Link to="/hello">Link</Link>
+              {this.props.children}
+            </div>
+          );
+        }
+      });
+
+      var a, steps = [
+        function () {
+          a = node.querySelector('a');
+          expect(a.className).toEqual('');
+          this.history.pushState(null, '/hello');
+        },
+        function () {
+          expect(a.className).toEqual('active');
+        }
+      ];
+
+      var execNextStep = execSteps(steps, done);
+
+      React.render((
+        <Router history={createHistory('/goodbye')} onUpdate={execNextStep}>
+          <Route path="/" component={LinkWrapper}>
+            <Route path="goodbye" component={Goodbye} />
+            <Route path="hello" component={Hello} />
+          </Route>
+        </Router>
+      ), node, execNextStep);
+    });
+  });
+
   describe('when clicked', function () {
     it('calls a user defined click handler', function (done) {
       var LinkWrapper = React.createClass({