diff --git a/README.md b/README.md index f8eb813c50..754e499b3a 100644 --- a/README.md +++ b/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({
  • Users
  • User 123
  • - {this.props.activeRoute} + {this.props.activeRoute()} ); } @@ -108,7 +108,7 @@ var Users = React.createClass({ return (

    Users

    - {this.props.activeRoute} + {this.props.activeRoute()}
    ); } @@ -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 `` the dynamic values are available at diff --git a/examples/auth-flow/app.js b/examples/auth-flow/app.js index 86daccefc3..91b17166c9 100644 --- a/examples/auth-flow/app.js +++ b/examples/auth-flow/app.js @@ -34,7 +34,7 @@ var App = React.createClass({
  • About
  • Dashboard (authenticated)
  • - {this.props.activeRoute} + {this.props.activeRoute()} ); } @@ -99,7 +99,7 @@ var Login = React.createClass({ var errors = this.state.error ?

    Bad login information

    : ''; return (
    - + (hint: password1)
    {errors} diff --git a/examples/data-flow/app.js b/examples/data-flow/app.js index 4824101738..d07c16dd67 100644 --- a/examples/data-flow/app.js +++ b/examples/data-flow/app.js @@ -56,7 +56,7 @@ var App = React.createClass({ {links}
    - {this.props.activeRoute} + {this.props.activeRoute()}
    ); diff --git a/examples/dynamic-segments/app.js b/examples/dynamic-segments/app.js index d677d67caf..447542fa68 100644 --- a/examples/dynamic-segments/app.js +++ b/examples/dynamic-segments/app.js @@ -12,7 +12,7 @@ var App = React.createClass({
  • Bob
  • Sally
  • - {this.props.activeRoute} + {this.props.activeRoute()} ); } @@ -27,7 +27,7 @@ var User = React.createClass({
  • foo task
  • bar task
  • - {this.props.activeRoute} + {this.props.activeRoute()} ); } diff --git a/examples/master-detail/app.js b/examples/master-detail/app.js index 7a1ed44820..9cc7f2fa41 100644 --- a/examples/master-detail/app.js +++ b/examples/master-detail/app.js @@ -111,7 +111,7 @@ var App = React.createClass({ var contacts = this.state.contacts.map(function(contact) { return
  • {contact.first}
  • }); - var content = (this.props.activeRoute) ? this.props.activeRoute : this.indexTemplate(); + var content = (this.props.activeRoute) ? this.props.activeRoute() : this.indexTemplate(); return (
    diff --git a/examples/partial-app-loading/app.js b/examples/partial-app-loading/app.js index cd4fb3f916..a796396430 100644 --- a/examples/partial-app-loading/app.js +++ b/examples/partial-app-loading/app.js @@ -52,7 +52,7 @@ var App = React.createClass({
    • Dashboard
    - {this.props.activeRoute} + {this.props.activeRoute()}
    ); } diff --git a/examples/partial-app-loading/dashboard.js b/examples/partial-app-loading/dashboard.js index 46d52f3108..e77c123e86 100644 --- a/examples/partial-app-loading/dashboard.js +++ b/examples/partial-app-loading/dashboard.js @@ -13,7 +13,7 @@ var Dashboard = React.createClass({
    • Inbox
    - {this.props.activeRoute} + {this.props.activeRoute()}
    ); } diff --git a/examples/query-params/app.js b/examples/query-params/app.js index c070b8fd59..613e6c3517 100644 --- a/examples/query-params/app.js +++ b/examples/query-params/app.js @@ -13,7 +13,7 @@ var App = React.createClass({
  • Bob With Query Params
  • Sally
  • - {this.props.activeRoute} + {this.props.activeRoute()} ); } diff --git a/examples/shared-root/app.js b/examples/shared-root/app.js index 71617f88d0..b969f24155 100644 --- a/examples/shared-root/app.js +++ b/examples/shared-root/app.js @@ -13,7 +13,7 @@ var App = React.createClass({
  • Sign in
  • Forgot Password
  • - {this.props.activeRoute} + {this.props.activeRoute()} ); } @@ -24,7 +24,7 @@ var SignedIn = React.createClass({ return (

    Signed In

    - {this.props.activeRoute} + {this.props.activeRoute()}
    ); } @@ -43,7 +43,7 @@ var SignedOut = React.createClass({ return (

    Signed Out

    - {this.props.activeRoute} + {this.props.activeRoute()}
    ); } diff --git a/examples/transitions/app.js b/examples/transitions/app.js index 3b36a50f0e..fca1ee4f95 100644 --- a/examples/transitions/app.js +++ b/examples/transitions/app.js @@ -12,7 +12,7 @@ var App = React.createClass({
  • Dashboard
  • Form
  • - {this.props.activeRoute ||

    Home

    } + {this.props.activeRoute() ||

    Home

    } ); } diff --git a/modules/components/Route.js b/modules/components/Route.js index 5d07169b7d..ba17868a2d 100644 --- a/modules/components/Route.js +++ b/modules/components/Route.js @@ -64,7 +64,7 @@ var RESERVED_PROPS = { * render: function () { * return ( *
    - * {this.props.activeRoute} + * {this.props.activeRoute()} *
    * ); * } @@ -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; }); diff --git a/specs/Route.spec.js b/specs/Route.spec.js index 2b1aea5f97..7a363f27fc 100644 --- a/specs/Route.spec.js +++ b/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({