|
30 | 30 | -----
|
31 | 31 |
|
32 | 32 | 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. |
34 | 35 |
|
35 | 36 | ```
|
36 | 37 | var Route = require('react-nested-router').Route;
|
@@ -58,24 +59,18 @@ React.renderComponent((
|
58 | 59 | ), document.body);
|
59 | 60 | ```
|
60 | 61 |
|
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. |
67 | 65 |
|
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`. |
70 | 68 |
|
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. |
76 | 71 |
|
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. |
79 | 74 |
|
80 | 75 | Here's the rest of the application:
|
81 | 76 |
|
@@ -121,6 +116,21 @@ var User = React.createClass({
|
121 | 116 | });
|
122 | 117 | ```
|
123 | 118 |
|
| 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 | + |
124 | 134 | Benefits of This Approach
|
125 | 135 | -------------------------
|
126 | 136 |
|
@@ -180,7 +190,7 @@ routes do not inherit the path of their parent.
|
180 | 190 |
|
181 | 191 | Routes can be nested. When a child route matches, the parent route's
|
182 | 192 | 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 |
184 | 194 | passing in any additional props as needed.
|
185 | 195 |
|
186 | 196 | #### Examples
|
@@ -215,8 +225,9 @@ props and static methods available to these components.
|
215 | 225 |
|
216 | 226 | #### Props
|
217 | 227 |
|
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. |
220 | 231 |
|
221 | 232 | **this.props.params** - When a route has dynamic segments like `<Route
|
222 | 233 | path="users/:userId"/>` the dynamic values are available at
|
@@ -338,21 +349,7 @@ Router.goBack();
|
338 | 349 | Development
|
339 | 350 | -----------
|
340 | 351 |
|
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) |
356 | 353 |
|
357 | 354 | Thanks, Ember
|
358 | 355 | -------------
|
|
0 commit comments