Merge pull request #90 from benjohnson/active-route

[changed] activeRoute can render with props and children.

Author: mjackson

README.md

@@ -60,7 +60,7 @@ React.renderComponent((
 
 When a `Route` is active, you'll get an instance of `handler`
 automatically rendered for you. When one of the child routes is active,
-you can render it with `this.props.activeRoute` in the parent all the
+you can render it with `this.props.activeRoute()` in the parent all the
 way down the view hierarchy. This allows you to create nested layouts
 without having to wire it all up yourself. `Link` components create
 accessible anchor tags to route you around the application.
@@ -91,7 +91,7 @@ var App = React.createClass({
           <li><Link to="users">Users</Link></li>
           <li><Link to="user" userId="123">User 123</Link></li>
         </ul>
-        {this.props.activeRoute}
+        {this.props.activeRoute()}
       </div>
     );
   }
@@ -108,7 +108,7 @@ var Users = React.createClass({
     return (
       <div>
         <h2>Users</h2>
-        {this.props.activeRoute}
+        {this.props.activeRoute()}
       </div>
     );
   }
@@ -180,8 +180,7 @@ routes do not inherit the path of their parent.
 
 Routes can be nested. When a child route matches, the parent route's
 handler will have an instance of the child route's handler available on
-`this.props.activeRoute`.
-
+`this.props.activeRoute()`.
 #### Examples
 
 ```xml
@@ -215,7 +214,8 @@ props and static methods available to these components.
 #### Props
 
 **this.props.activeRoute** - The active child route handler instance.
-Use it in your render method to render the child route.
+Use it in your render method to render the child route. You can pass
+additional props to it for rendering.
 
 **this.props.params** - When a route has dynamic segments like `<Route
 path="users/:userId"/>` the dynamic values are available at

examples/auth-flow/app.js

@@ -34,7 +34,7 @@ var App = React.createClass({
           <li><Link to="about">About</Link></li>
           <li><Link to="dashboard">Dashboard</Link> (authenticated)</li>
         </ul>
-        {this.props.activeRoute}
+        {this.props.activeRoute()}
       </div>
     );
   }
@@ -99,7 +99,7 @@ var Login = React.createClass({
     var errors = this.state.error ? <p>Bad login information</p> : '';
     return (
       <form onSubmit={this.handleSubmit}>
-        <label><input ref="email" placeholder="email" defaultValue="[email protected]"/></label> 
+        <label><input ref="email" placeholder="email" defaultValue="[email protected]"/></label>
         <label><input ref="pass" placeholder="password"/></label> (hint: password1)<br/>
         <button type="submit">login</button>
         {errors}

examples/data-flow/app.js

@@ -56,7 +56,7 @@ var App = React.createClass({
           {links}
         </ul>
         <div className="Detail">
-          {this.props.activeRoute}
+          {this.props.activeRoute()}
         </div>
       </div>
     );

examples/dynamic-segments/app.js

@@ -12,7 +12,7 @@ var App = React.createClass({
           <li><Link to="user" userId="123">Bob</Link></li>
           <li><Link to="user" userId="abc">Sally</Link></li>
         </ul>
-        {this.props.activeRoute}
+        {this.props.activeRoute()}
       </div>
     );
   }
@@ -27,7 +27,7 @@ var User = React.createClass({
           <li><Link to="task" userId={this.props.params.userId} taskId="foo">foo task</Link></li>
           <li><Link to="task" userId={this.props.params.userId} taskId="bar">bar task</Link></li>
         </ul>
-        {this.props.activeRoute}
+        {this.props.activeRoute()}
       </div>
     );
   }

examples/master-detail/app.js

@@ -111,7 +111,7 @@ var App = React.createClass({
     var contacts = this.state.contacts.map(function(contact) {
       return <li key={contact.id}><Link to="contact" id={contact.id}>{contact.first}</Link></li>
     });
-    var content = (this.props.activeRoute) ? this.props.activeRoute : this.indexTemplate();
+    var content = (this.props.activeRoute) ? this.props.activeRoute() : this.indexTemplate();
     return (
       <div className="App">
         <div className="ContactList">

examples/partial-app-loading/app.js

@@ -52,7 +52,7 @@ var App = React.createClass({
         <ul>
           <li><Link to="dashboard">Dashboard</Link></li>
         </ul>
-        {this.props.activeRoute}
+        {this.props.activeRoute()}
       </div>
     );
   }

examples/partial-app-loading/dashboard.js

@@ -13,7 +13,7 @@ var Dashboard = React.createClass({
         <ul>
           <li><Link to="inbox">Inbox</Link></li>
         </ul>
-        {this.props.activeRoute}
+        {this.props.activeRoute()}
       </div>
     );
   }

examples/query-params/app.js

@@ -13,7 +13,7 @@ var App = React.createClass({
           <li><Link to="user" userId="123" query={{showAge: true}}>Bob With Query Params</Link></li>
           <li><Link to="user" userId="abc">Sally</Link></li>
         </ul>
-        {this.props.activeRoute}
+        {this.props.activeRoute()}
       </div>
     );
   }

examples/shared-root/app.js

@@ -13,7 +13,7 @@ var App = React.createClass({
           <li><Link to="signin">Sign in</Link></li>
           <li><Link to="forgot-password">Forgot Password</Link></li>
         </ol>
-        {this.props.activeRoute}
+        {this.props.activeRoute()}
       </div>
     );
   }
@@ -24,7 +24,7 @@ var SignedIn = React.createClass({
     return (
       <div>
         <h2>Signed In</h2>
-        {this.props.activeRoute}
+        {this.props.activeRoute()}
       </div>
     );
   }
@@ -43,7 +43,7 @@ var SignedOut = React.createClass({
     return (
       <div>
         <h2>Signed Out</h2>
-        {this.props.activeRoute}
+        {this.props.activeRoute()}
       </div>
     );
   }

examples/transitions/app.js

@@ -12,7 +12,7 @@ var App = React.createClass({
           <li><Link to="dashboard">Dashboard</Link></li>
           <li><Link to="form">Form</Link></li>
         </ul>
-        {this.props.activeRoute || <h1>Home</h1>}
+        {this.props.activeRoute() || <h1>Home</h1>}
       </div>
     );
   }

modules/components/Route.js

@@ -64,7 +64,7 @@ var RESERVED_PROPS = {
  *     render: function () {
  *       return (
  *         <div class="application">
- *           {this.props.activeRoute}
+ *           {this.props.activeRoute()}
  *         </div>
  *       );
  *     }
@@ -429,7 +429,7 @@ function computeHandlerProps(matches, query) {
     activeRoute: null
   };
 
-  var childDescriptor;
+  var childHandler;
   reversedArray(matches).forEach(function (match, index) {
     var route = match.route;
 
@@ -440,13 +440,15 @@ function computeHandlerProps(matches, query) {
     props.params = match.params;
     props.query = query;
 
-    if (childDescriptor) {
-      props.activeRoute = childDescriptor;
+    if (childHandler) {
+      props.activeRoute = childHandler;
     } else {
       props.activeRoute = null;
     }
 
-    childDescriptor = route.props.handler(props);
+    childHandler = function (props, addedProps, children) {
+      return route.props.handler(mergeProperties(props, addedProps), children);
+    }.bind(this, props);
 
     match.refName = props.ref;
   });

specs/Route.spec.js

@@ -114,7 +114,7 @@ describe('a child route', function() {
 //     var dataStore = 'goodbye';
 //     var Layout = React.createClass({
 //       render: function() {
-//         return React.DOM.article(null, this.props.activeRoute);
+//         return React.DOM.article(null, this.props.activeRoute());
 //       }
 //     });
 //     var AsyncApp = React.createClass({