Skip to content

Commit e3fdc83

Browse files
committed
Update Route docs
1 parent c2086fa commit e3fdc83

File tree

1 file changed

+47
-2
lines changed

1 file changed

+47
-2
lines changed

modules/components/Route.js

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,53 @@ var RESERVED_PROPS = {
2222
};
2323

2424
/**
25-
* <Route> components are used to declare routes from which Route
26-
* objects are made. See Route.fromComponent.
25+
* <Route> components specify components that are rendered to the page when the
26+
* URL matches a given pattern.
27+
*
28+
* Routes are arranged in a nested tree structure. When a new URL is requested,
29+
* the tree is searched depth-first to find a route whose path matches the URL.
30+
* When one is found, all routes in the tree that lead to it are considered
31+
* "active" and their components are rendered into the DOM, nested in the same
32+
* order as they are in the tree.
33+
*
34+
* Unlike Ember, a nested route's path does not build upon that of its parents.
35+
* This may seem like it creates more work up front in specifying URLs, but it
36+
* has the nice benefit of decoupling nested UI from "nested" URLs.
37+
*
38+
* The preferred way to configure a router is using JSX. The XML-like syntax is
39+
* a great way to visualize how routes are laid out in an application.
40+
*
41+
* React.renderComponent((
42+
* <Route handler={App}>
43+
* <Route name="login" handler={Login}/>
44+
* <Route name="logout" handler={Logout}/>
45+
* <Route name="about" handler={About}/>
46+
* </Route>
47+
* ), document.body);
48+
*
49+
* If you don't use JSX, you can also assemble a Router programmatically using
50+
* the standard React component JavaScript API.
51+
*
52+
* React.renderComponent((
53+
* Route({ handler: App },
54+
* Route({ name: 'login', handler: Login }),
55+
* Route({ name: 'logout', handler: Logout }),
56+
* Route({ name: 'about', handler: About })
57+
* )
58+
* ), document.body);
59+
*
60+
* Handlers for Route components that contain children can render their active
61+
* child route using the activeRoute prop.
62+
*
63+
* var App = React.createClass({
64+
* render: function () {
65+
* return (
66+
* <div class="application">
67+
* {this.props.activeRoute}
68+
* </div>
69+
* );
70+
* }
71+
* });
2772
*/
2873
var Route = React.createClass({
2974

0 commit comments

Comments
 (0)