Skip to content

Commit

Permalink
[changed] activeRoute -> activeRouteHandler
Browse files Browse the repository at this point in the history
its not really the route component, but rather
the active route’s handler
  • Loading branch information
ryanflorence committed Jul 22, 2014
1 parent f187c30 commit 58e7b98
Show file tree
Hide file tree
Showing 13 changed files with 26 additions and 26 deletions.
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,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.activeRouteHandler/>
</div>
);
}
Expand All @@ -103,7 +103,7 @@ var Users = React.createClass({
return (
<div>
<h2>Users</h2>
<this.props.activeRoute/>
<this.props.activeRouteHandler/>
</div>
);
}
Expand All @@ -116,16 +116,16 @@ var User = React.createClass({
});
```

To better understand what is happening with `activeRoute` perhaps an
To better understand what is happening with `activeRouteHandler` perhaps an
example without the router will help. Lets take the scenario where
`/users/2` has been matched. Your render method, without this router,
might look something like this:

```js
render: function() {
var user = <User params={{userId: 2}}/>;
var users = <User activeRoute={user}/>;
return <App activeRoute={users}/>;
var users = <User activeRouteHandler={user}/>;
return <App activeRouteHandler={users}/>;
}
```

Expand Down Expand Up @@ -190,7 +190,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 as
`this.props.activeRoute()`. You can then render it in the parent
`this.props.activeRouteHandler()`. You can then render it in the parent
passing in any additional props as needed.

#### Examples
Expand Down Expand Up @@ -225,7 +225,7 @@ props and static methods available to these components.

#### Props

**this.props.activeRoute(extraProps)** - The active child route handler.
**this.props.activeRouteHandler(extraProps)** - The active child route handler.
Use it in your render method to render the child route, passing in
additional properties as needed.

Expand Down
2 changes: 1 addition & 1 deletion 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.activeRouteHandler()()}
</div>
);
}
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 @@ -41,7 +41,7 @@ var App = React.createClass({
{links}
</ul>
<div className="Detail">
{this.props.activeRoute({onRemoveTaco: this.handleRemoveTaco})}
{this.props.activeRouteHandler({onRemoveTaco: this.handleRemoveTaco})}
</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.activeRouteHandler()}
</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.activeRouteHandler()}
</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 @@ -120,7 +120,7 @@ var App = React.createClass({
</ul>
</div>
<div className="Content">
{this.props.activeRoute() || this.indexTemplate()}
{this.props.activeRouteHandler() || this.indexTemplate()}
</div>
</div>
);
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.activeRouteHandler()}
</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.activeRouteHandler()}
</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.activeRouteHandler()}
</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.activeRouteHandler()}
</div>
);
}
Expand All @@ -24,7 +24,7 @@ var SignedIn = React.createClass({
return (
<div>
<h2>Signed In</h2>
{this.props.activeRoute()}
{this.props.activeRouteHandler()}
</div>
);
}
Expand All @@ -43,7 +43,7 @@ var SignedOut = React.createClass({
return (
<div>
<h2>Signed Out</h2>
{this.props.activeRoute()}
{this.props.activeRouteHandler()}
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion examples/simple-master-detail/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ var App = React.createClass({
{links}
</ul>
<div className="Detail">
{this.props.activeRoute() || this.indexTemplate()}
{this.props.activeRouteHandler() || this.indexTemplate()}
</div>
</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.activeRouteHandler() || <h1>Home</h1>}
</div>
);
}
Expand Down
10 changes: 5 additions & 5 deletions modules/components/Route.js
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,13 @@ var REF_NAME = '__activeRoute__';
* ), document.body);
*
* Handlers for Route components that contain children can render their active
* child route using the activeRoute prop.
* child route using the activeRouteHandler prop.
*
* var App = React.createClass({
* render: function () {
* return (
* <div class="application">
* {this.props.activeRoute()}
* {this.props.activeRouteHandler()}
* </div>
* );
* }
Expand Down Expand Up @@ -445,7 +445,7 @@ function computeHandlerProps(matches, query) {
key: null,
params: null,
query: null,
activeRoute: emptyFunction.thatReturnsNull
activeRouteHandler: emptyFunction.thatReturnsNull
};

var childHandler;
Expand All @@ -460,9 +460,9 @@ function computeHandlerProps(matches, query) {
props.query = query;

if (childHandler) {
props.activeRoute = childHandler;
props.activeRouteHandler = childHandler;
} else {
props.activeRoute = emptyFunction.thatReturnsNull;
props.activeRouteHandler = emptyFunction.thatReturnsNull;
}

childHandler = function (props, addedProps) {
Expand Down
2 changes: 1 addition & 1 deletion specs/Route.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,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.activeRouteHandler());
// }
// });
// var AsyncApp = React.createClass({
Expand Down

0 comments on commit 58e7b98

Please sign in to comment.