[changed] Pass named children as props

Fixes #1968

Author: mjackson

examples/sidebar/app.js

@@ -92,15 +92,15 @@ class IndexSidebar extends React.Component {
 
 class App extends React.Component {
   render() {
-    const { children } = this.props
+    const { content, sidebar } = this.props
 
     return (
       <div>
         <div className="Sidebar">
-          {children ? children.sidebar : <IndexSidebar />}
+          {sidebar || <IndexSidebar />}
         </div>
         <div className="Content">
-          {children ? children.content : <Index />}
+          {content || <Index />}
         </div>
       </div>
     )

modules/RoutingContext.js

@@ -1,5 +1,6 @@
 import invariant from 'invariant'
 import React, { Component } from 'react'
+import { isReactChildren } from './RouteUtils'
 import getRouteParams from './getRouteParams'
 
 const { array, func, object } = React.PropTypes
@@ -46,7 +47,7 @@ class RoutingContext extends Component {
     if (components) {
       element = components.reduceRight((element, components, index) => {
         if (components == null)
-          return element // Don't create new children use the grandchildren.
+          return element // Don't create new children; use the grandchildren.
 
         const route = routes[index]
         const routeParams = getRouteParams(route, params)
@@ -59,13 +60,18 @@ class RoutingContext extends Component {
           routes
         }
 
-        if (element)
+        if (isReactChildren(element)) {
           props.children = element
+        } else if (element) {
+          for (let prop in element)
+            if (element.hasOwnProperty(prop))
+              props[prop] = element[prop]
+        }
 
         if (typeof components === 'object') {
           const elements = {}
 
-          for (const key in components)
+          for (let key in components)
             if (components.hasOwnProperty(key))
               elements[key] = this.createElement(components[key], props)