[fix] Context warning with a ContextWrapper component

Author: nhunzaker

modules/components/ContextWrapper.js

@@ -0,0 +1,34 @@
+/**
+ * This component is necessary to get around a context warning
+ * present in React 0.13.0. It sovles this by providing a separation
+ * between the "owner" and "parent" contexts.
+ */
+
+var React = require('react');
+var PropTypes = require('../PropTypes');
+
+class ContextWrapper extends React.Component {
+
+  getChildContext() {
+    return {
+      router: this.context.router,
+      routeDepth: this.context.routeDepth
+    };
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+ContextWrapper.contextTypes = {
+  routeDepth: PropTypes.number.isRequired,
+  router: PropTypes.router.isRequired
+};
+
+ContextWrapper.childContextTypes = {
+  routeDepth: PropTypes.number.isRequired,
+  router: PropTypes.router.isRequired
+};
+
+module.exports = ContextWrapper;

modules/components/RouteHandler.js

@@ -1,4 +1,5 @@
 var React = require('react');
+var ContextWrapper = require('./ContextWrapper')
 var assign = require('react/lib/Object.assign');
 var PropTypes = require('../PropTypes');
 
@@ -42,10 +43,7 @@ class RouteHandler extends React.Component {
   }
 
   render() {
-    // IMPORTANT: This span "soaks" up owner context, keeping
-    // React 0.13.0 from throwing a warning.
-    // TODO: Why should this even be necessary?
-    return <span>{ this.createChildRouteHandler() }</span>
+    return <ContextWrapper>{ this.createChildRouteHandler() }</ContextWrapper>
   }
 
 }