move named components back onto props.children

This makes building abstractions like AsyncProps simpler and less error-
prone because it knows exactly where to find the elements it needs to
clone or wrap or whatever. Having them on `props` makes it impossible
to know if the component there is a component from a route or somewhere
else.

This was the original API, but we moved them off of children because it
seemed a little to weird, but lately passing a function to children has
been accepted, so why not objects?

Author: ryanflorence

examples/sidebar/app.js

@@ -81,13 +81,14 @@ var IndexSidebar = React.createClass({
 
 var App = React.createClass({
   render() {
+    var { children } = this.props;
     return (
       <div>
         <div className="Sidebar">
-          {this.props.sidebar || <IndexSidebar />}
+          {children ? children.sidebar : <IndexSidebar />}
         </div>
         <div className="Content">
-          {this.props.content || <Index />}
+          {children ? children.content : <Index />}
         </div>
       </div>
     );

modules/RoutingContext.js

@@ -60,12 +60,8 @@ var RoutingContext = React.createClass({
           routeParams
         };
 
-        if (React.isValidElement(element)) {
+        if (element)
           props.children = element;
-        } else if (element) {
-          // In render, do var { header, sidebar } = this.props;
-          Object.assign(props, element);
-        }
 
         if (typeof components === 'object') {
           var elements = {};

modules/__tests__/Router-test.js

@@ -104,4 +104,41 @@ describe('Router', function () {
     });
   });
 
+  describe('with named components', function() {
+    it('renders the named components', function(done) {
+      var Parent = React.createClass({
+        render() {
+          return (
+            <div>
+              {this.props.children.sidebar}-{this.props.children.content}
+            </div>
+          );
+        }
+      });
+
+      var Sidebar = React.createClass({
+        render() {
+          return <div>sidebar</div>;
+        }
+      });
+
+      var Content = React.createClass({
+        render() {
+          return <div>content</div>;
+        }
+      });
+
+      React.render((
+        <Router history={createHistory('/')}>
+          <Route component={Parent}>
+            <Route path="/" components={{sidebar: Sidebar, content: Content}} />
+          </Route>
+        </Router>
+      ), node, function () {
+        expect(node.textContent.trim()).toEqual('sidebar-content');
+        done();
+      });
+    });
+  });
+
 });