Skip to content

Commit f9894b7

Browse files
committed
updated the README
1 parent 4f9ac31 commit f9894b7

File tree

2 files changed

+33
-36
lines changed

2 files changed

+33
-36
lines changed

CONTRIBUTING.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ following prefixes in your commit subject:
88
- `[added] ...`
99
- `[removed] ...`
1010

11-
When releasing, a changelog is created automatically, from these
12-
commits.
11+
That ensures the subject line of your commit makes it into the
12+
auto-generated changelog.
1313

1414
### Development
1515

README.md

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ Usage
3030
-----
3131

3232
This library only ships with CommonJS modules, so you'll need browserify or
33-
webpack or something that can load/bundle it.
33+
webpack or something that can load/bundle it, a global build is coming
34+
soon.
3435

3536
```
3637
var Route = require('react-nested-router').Route;
@@ -58,24 +59,18 @@ React.renderComponent((
5859
), document.body);
5960
```
6061

61-
When a `Route` is active, you'll get an instance of `handler`
62-
automatically rendered for you. When one of the child routes is active,
63-
the component will be available as `this.props.activeRoute` in the parent
64-
all the way down the view hierarchy. This allows you to create nested layouts
65-
without having to wire it all up yourself. `Link` components create
66-
accessible anchor tags to route you around the application.
62+
Urls will be matched to the deepest route, and then all the routes up
63+
the hierarchy are activated and their "handlers" (normal React
64+
components) will be rendered.
6765

68-
As an example, if the current path is `/user/17`, the following
69-
component will be rendered:
66+
Each handler will receive a `params` property containing the matched
67+
parameters form the url, like `:userId`.
7068

71-
```js
72-
<App activeRoute={
73-
<Users activeRoute={<User params={{userId: 17}} />} />
74-
} />
75-
```
69+
Handlers also receive a `query` prop equal to a dictionary of the
70+
current query params.
7671

77-
Each component will also receive a `query` prop equal to a dictionary
78-
of the current query params.
72+
Parent routes will receive a `activeRoute` property. Its a function that
73+
will render the active child route handler.
7974

8075
Here's the rest of the application:
8176

@@ -121,6 +116,21 @@ var User = React.createClass({
121116
});
122117
```
123118

119+
To better understand what is happening with `activeRoute` perhaps an
120+
example without the router will help. Lets take the scenario where
121+
`/users/2` has been matched. Your render method, without this router,
122+
might look something like this:
123+
124+
```js
125+
render: function() {
126+
var user = <User params={{userId: 2}}/>;
127+
var users = <User activeRoute={user}/>;
128+
return <App activeRoute={users}/>;
129+
}
130+
```
131+
132+
Instead, the router manages this view hierarchy for you.
133+
124134
Benefits of This Approach
125135
-------------------------
126136

@@ -180,7 +190,7 @@ routes do not inherit the path of their parent.
180190

181191
Routes can be nested. When a child route matches, the parent route's
182192
handler will have an instance of the child route's handler available as
183-
`this.props.activeRoute`. You can then render it in the parent
193+
`this.props.activeRoute()`. You can then render it in the parent
184194
passing in any additional props as needed.
185195

186196
#### Examples
@@ -215,8 +225,9 @@ props and static methods available to these components.
215225

216226
#### Props
217227

218-
**this.props.activeRoute** - The active child route handler.
219-
Use it in your render method to render the child route.
228+
**this.props.activeRoute(extraProps)** - The active child route handler.
229+
Use it in your render method to render the child route, passing in
230+
additional properties as needed.
220231

221232
**this.props.params** - When a route has dynamic segments like `<Route
222233
path="users/:userId"/>` the dynamic values are available at
@@ -338,21 +349,7 @@ Router.goBack();
338349
Development
339350
-----------
340351

341-
- `script/test` will fire up a karma runner and watch for changes in the
342-
specs directory.
343-
- `npm test` will do the same but doesn't watch, just runs the tests.
344-
- `script/build-examples` does exactly that.
345-
346-
### Commit subjects
347-
348-
When releasing, a changelog is created automatically, if your commit
349-
subject is important to the API or fixes a bug, please use one of the
350-
following prefixes:
351-
352-
- `[fixed] ...`
353-
- `[changed] ...`
354-
- `[added] ...`
355-
- `[removed] ...`
352+
Please see [CONTRIBUTING](CONTRIBUTING.md)
356353

357354
Thanks, Ember
358355
-------------

0 commit comments

Comments
 (0)