route docs

Author: ryanflorence

doc/01 Route Configuration/0 Route.md renamed to docs/Route.md

@@ -1,30 +1,26 @@
+## Route
+
 A `Route` is used to declaratively map routes to your application's
 component hierarchy.
 
-Props
------
+### Props
 
-### `path`
+#### `path`
 
 The path used in the URL.
 
-It will concat with the parent route's path unless it starts with `/`.
-In which case you will need to use `absoluteChildPaths` on the parent
-route so the router knows to keep going down the route tree even though
-the parent path doesn't match the url.
+It will concat with the parent route's path unless it starts with `/`,
+making it an absolute path.
 
-If left undefined, the router will try to match the child routes.
+**Note**: Absolute paths may not be used in route config that is [dynamically loaded](DynamicRouting.md).
 
-Please refer to the [Path Matching Guide][path-matching] to learn more
-about supported path matching syntax.
+If left undefined, the router will try to match the child routes.
 
-### `component`
+#### `component`
 
 A single component to be rendered when the route matches the url. It can
 be rendered by the parent route component with `this.props.children`.
 
-#### Example
-
 ```js
 var routes = (
   <Route component={App}>
@@ -45,19 +41,18 @@ var App = React.createClass({
 });
 ```
 
-### `components`
+#### `components`
 
-Routes can define multiple components as an object of name:component
+Routes can define multiple components as an object of `name:component`
 pairs to be rendered when the path matches the url. They can be rendered
-by the parent route component with `this.props[name]`.
+by the parent route component with `this.props.children[name]`.
 
-#### Example
+##### Example
 
 ```js
 // think of it outside the context of the router, if you had pluggable
 // portions of your `render`, you might do it like this
-<App main={<Users/>} sidebar={<UsersSidebar/>}/>
-<App main={<Groups/>} sidebar={<GroupsSidebar/>}/>
+<App children={{main: <Users/>, sidebar: <UsersSidebar/>}}/>
 
 // So with the router it looks like this:
 var routes = (
@@ -71,14 +66,14 @@ var routes = (
 
 var App = React.createClass({
   render () {
-    // the matched child route components become props in the parent
+    var { main, sidebar } = this.props.children;
     return (
       <div>
         <div className="Main">
-          {this.props.main}
+          {main}
         </div>
         <div className="Sidebar">
-          {this.props.sidebar}
+          {sidebar}
         </div>
       </div>
     );
@@ -96,48 +91,53 @@ var Users = React.createClass({
     );
   }
 });
-
 ```
 
-### `getComponents(state, cb)`
+#### `getComponent(callback)`
 
-Same as `components` but asynchronous, useful for code-splitting and
-returning different routes given some transition `state`.
+Same as `component` but asynchronous, useful for
+code-splitting.
 
-#### `callback` signature
+##### `callback` signature
 
 `cb(err, component)`
 
-#### Example
+##### Example
 
 ```js
-<Route path="coures/:courseId" getComponents={(cb) => {
+<Route path="coures/:courseId" getComponent={(cb) => {
   // do asynchronous stuff to find the components
-  cb(null, [Course]);
+  cb(null, Course);
 }}/>
 ```
 
-### `children`
+#### `getComponents(callback)`
+
+Same as `components` but asynchronous, useful for
+code-splitting.
+
+##### `callback` signature
+
+`cb(err, components)`
+
+##### Example
+
+```js
+<Route path="coures/:courseId" getComponent={(cb) => {
+  // do asynchronous stuff to find the components
+  cb(null, {sidebar: CourseSidebar, content: Course});
+}}/>
+```
 
-Routes can be nested, `this.props.children` will contain the element
-created from the child route component. Please refer to the
-[overview][overview] since this is a very critical part of the router's
-design.
+#### `children`
 
-### `onEnter(nextState, transition)`
+Routes can be nested, `this.props.children` will contain the element created from the child route component. Please refer to the [Route Configuration][RouteConfiguration.md] since this is a very critical part of the router's design.
 
-Called when a route is about to be entered. It provides the next router
-state and the [transition][Transition] instance for cancelling/redirecting.
+#### `onEnter(nextState, redirectTo)`
 
-### `onLeave(nextState, transition)`
+Called when a route is about to be entered. It provides the next router state and a function to redirect to another path.
 
-Called when a route is about to be exited. It provides the next router
-state and the [transition][Transition] instance for cancelling/redirecting.
+#### `onLeave()`
 
-  [overview]:#TODO
-  [path-matching]:#TODO
-  [ignoreScrollBehavior]:#TODO
-  [instragram-example]:#TODO
-  [history]:#TODO
-  [Transition]:#TODO
+Called when a route is about to be exited.
 

modules/getComponents.js

@@ -3,6 +3,8 @@ import { mapAsync } from './AsyncUtils';
 function getComponentsForRoute(route, callback) {
   if (route.component || route.components) {
     callback(null, route.component || route.components);
+  } else if (route.getComponent) {
+    route.getComponent(callback);
   } else if (route.getComponents) {
     route.getComponents(callback);
   } else {