Fix route depth

Author: mjackson

modules/__tests__/Router-test.js

@@ -56,13 +56,13 @@ describe('Router', function () {
   });
 
   describe('willTransitionFrom', function () {
-    it('sends a rendered component', function (done) {
+    it('sends a rendered element', function (done) {
       var div = document.createElement('div');
 
       var Bar = React.createClass({
         statics: {
-          willTransitionFrom: function (transition, component) {
-            expect(div.querySelector('#bar')).toEqual(component.getDOMNode());
+          willTransitionFrom: function (transition, element) {
+            expect(div.querySelector('#bar')).toEqual(element.getDOMNode());
             done();
           }
         },

modules/elements/RouteHandler.js

@@ -15,28 +15,41 @@ var RouteHandler = React.createClass({
   },
 
   contextTypes: {
-    pushRouteHandlerElement: React.PropTypes.func.isRequired,
-    popRouteHandlerElement: React.PropTypes.func.isRequired,
-    getCurrentRouteAtDepth: React.PropTypes.func.isRequired
+    getElements: React.PropTypes.func.isRequired,
+    getRouteAtDepth: React.PropTypes.func.isRequired,
+    routeHandlers: React.PropTypes.array.isRequired
   },
 
-  componentWillMount: function () {
-    this._routeDepth = this.context.pushRouteHandlerElement(this);
+  childContextTypes: {
+    routeHandlers: React.PropTypes.array.isRequired
   },
 
-  componentWillUnmount: function () {
-    this.context.popRouteHandlerElement(this);
+  getChildContext: function () {
+    return {
+      routeHandlers: this.context.routeHandlers.concat([ this ])
+    };
+  },
+
+  getRouteDepth: function () {
+    return this.context.routeHandlers.length - 1;
+  },
+
+  componentDidMount: function () {
+    this._updateElement();
+  },
+
+  componentDidUpdate: function () {
+    this._updateElement();
   },
 
-  /**
-   * Returns the route handler's element.
-   */
-  getHandlerElement: function () {
-    return this.refs[this.props.ref];
+  _updateElement: function () {
+    var depth = this.getRouteDepth();
+    var elements = this.context.getElements();
+    elements[depth] = this.refs[this.props.ref];
   },
 
   render: function () {
-    var route = this.context.getCurrentRouteAtDepth(this._routeDepth);
+    var route = this.context.getRouteAtDepth(this.getRouteDepth());
     return route ? React.createElement(route.handler, this.props) : null;
   }
 

modules/mixins/RouteHandlerContext.js

@@ -44,10 +44,9 @@ function runTransitionFromHooks(transition, routes, elements, callback) {
   var hooks = reversedArray(routes).map(function (route, index) {
     return function () {
       var handler = route.handler;
-      var element = elements[index];
 
       if (!transition.isAborted && handler.willTransitionFrom)
-        return handler.willTransitionFrom(transition, element && element.getHandlerElement());
+        return handler.willTransitionFrom(transition, elements[index]);
 
       var promise = transition._promise;
       transition._promise = null;

modules/utils/Transition.js

@@ -8,7 +8,6 @@ var HashLocation = require('../locations/HashLocation');
 var HistoryLocation = require('../locations/HistoryLocation');
 var NavigationContext = require('../mixins/NavigationContext');
 var StateContext = require('../mixins/StateContext');
-var RouteHandlerContext = require('../mixins/RouteHandlerContext');
 var Scrolling = require('../mixins/Scrolling');
 var createRoutesFromChildren = require('./createRoutesFromChildren');
 var supportsHistory = require('./supportsHistory');
@@ -149,7 +148,7 @@ function createRouter(options) {
 
     displayName: 'Router',
 
-    mixins: [ NavigationContext, StateContext, RouteHandlerContext, Scrolling ],
+    mixins: [ NavigationContext, StateContext, Scrolling ],
 
     statics: {
 
@@ -379,6 +378,11 @@ function createRouter(options) {
       return elements;
     },
 
+    getRouteAtDepth: function (depth) {
+      var routes = this.state.routes;
+      return routes && routes[depth];
+    },
+
     getInitialState: function () {
       return state;
     },
@@ -388,8 +392,21 @@ function createRouter(options) {
     },
 
     render: function () {
-      var routes = this.state.routes;
-      return routes && routes.length ? React.createElement(RouteHandler, this.props) : null;
+      return this.getRouteAtDepth(0) ? React.createElement(RouteHandler, this.props) : null;
+    },
+
+    childContextTypes: {
+      getElements: React.PropTypes.func.isRequired,
+      getRouteAtDepth: React.PropTypes.func.isRequired,
+      routeHandlers: React.PropTypes.array.isRequired
+    },
+
+    getChildContext: function () {
+      return {
+        getElements: this.getElements,
+        getRouteAtDepth: this.getRouteAtDepth,
+        routeHandlers: [ this ]
+      };
     }
 
   });