Skip to content

Commit

Permalink
[changed] activeRoute can render with props and children.
Browse files Browse the repository at this point in the history
  • Loading branch information
benjohnson committed Jul 18, 2014
1 parent 1a28f94 commit 73570ed
Show file tree
Hide file tree
Showing 12 changed files with 27 additions and 25 deletions.
12 changes: 6 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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>
);
}
Expand All @@ -108,7 +108,7 @@ var Users = React.createClass({
return (
<div>
<h2>Users</h2>
{this.props.activeRoute}
{this.props.activeRoute()}
</div>
);
}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions examples/auth-flow/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down Expand Up @@ -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="joe@example.com"/></label>
<label><input ref="email" placeholder="email" defaultValue="joe@example.com"/></label>
<label><input ref="pass" placeholder="password"/></label> (hint: password1)<br/>
<button type="submit">login</button>
{errors}
Expand Down
2 changes: 1 addition & 1 deletion examples/data-flow/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ var App = React.createClass({
{links}
</ul>
<div className="Detail">
{this.props.activeRoute}
{this.props.activeRoute()}
</div>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions examples/dynamic-segments/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand All @@ -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>
);
}
Expand Down
2 changes: 1 addition & 1 deletion examples/master-detail/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion examples/partial-app-loading/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ var App = React.createClass({
<ul>
<li><Link to="dashboard">Dashboard</Link></li>
</ul>
{this.props.activeRoute}
{this.props.activeRoute()}
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion examples/partial-app-loading/dashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ var Dashboard = React.createClass({
<ul>
<li><Link to="inbox">Inbox</Link></li>
</ul>
{this.props.activeRoute}
{this.props.activeRoute()}
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion examples/query-params/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
6 changes: 3 additions & 3 deletions examples/shared-root/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand All @@ -24,7 +24,7 @@ var SignedIn = React.createClass({
return (
<div>
<h2>Signed In</h2>
{this.props.activeRoute}
{this.props.activeRoute()}
</div>
);
}
Expand All @@ -43,7 +43,7 @@ var SignedOut = React.createClass({
return (
<div>
<h2>Signed Out</h2>
{this.props.activeRoute}
{this.props.activeRoute()}
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion examples/transitions/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
12 changes: 7 additions & 5 deletions modules/components/Route.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ var RESERVED_PROPS = {
* render: function () {
* return (
* <div class="application">
* {this.props.activeRoute}
* {this.props.activeRoute()}
* </div>
* );
* }
Expand Down Expand Up @@ -429,7 +429,7 @@ function computeHandlerProps(matches, query) {
activeRoute: null
};

var childDescriptor;
var childHandler;
reversedArray(matches).forEach(function (match, index) {
var route = match.route;

Expand All @@ -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;
});
Expand Down
2 changes: 1 addition & 1 deletion specs/Route.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down

0 comments on commit 73570ed

Please sign in to comment.