11API: ` Route ` (component)
22=========================
33
4- Configuration component to declare your application's routes and view hierarchy.
4+ Configuration component to declare your application's routes and entry
5+ view hierarchy.
56
67Props
78-----
@@ -23,77 +24,30 @@ about supported path matching syntax.
2324
2425The component to be rendered when the route is active.
2526
26- ### ` addHandlerKey `
27-
28- Defaults to ` false ` .
29-
30- If you have dynamic segments in your URL, a transition from ` /users/123 `
31- to ` /users/456 ` does not call ` getInitialState ` , ` componentWillMount ` or
32- ` componentWillUnmount ` . If you are using those lifecycle hooks to fetch
33- data and set state, you will also need to implement
34- ` componentWillReceiveProps ` on your handler, just like any other
35- component with changing props. This way, you can leverage the
36- performance of the React DOM diff algorithm. Look at the ` Contact `
37- handler in the ` master-detail ` example.
38-
39- If you'd rather be lazy, set this to ` true ` and the router will add a
40- key to your route, causing all new DOM to be built, and then the life
41- cycle hooks will all be called.
42-
43- You will want this to be ` true ` if you're doing animations with React's
44- TransitionGroup component.
45-
4627### ` children `
4728
48- Routes can be nested. When a child route matches, the parent route's
49- handler will have the child route's handler available as
50- ` this.props.activeRouteHandler ` . You can then render it in the parent
51- passing in any additional props as needed.
52-
53- ### ` [prop] `
54-
55- Any additional, user-defined, properties will be become properties of
56- the rendered handler.
57-
58- #### Example:
59-
60- ``` js
61- var App;
62- var foo = " hello"
63-
64- var routes = (
65- < Routes>
66- // pass `foo` to `something`
67- < Route handler= {App} something= {foo}/ >
68- < / Routes>
69- );
70-
71- App = React .createClass ({
72- render : function () {
73- // access `something` on props
74- return < div> {this .props .something }< / div>
75- }
76- });
77-
78- React .renderComponent (routes, document .body );
79- document .body .innerHTML // -> <div>hello</div>
80- ```
29+ Routes can be nested. When a child route path matches, the parent route
30+ is also activated. Please refer to the [ overview] [ overview ] since this
31+ is a very critical part of the router's design.
8132
8233Example
8334-------
8435
8536``` xml
86- <Routes >
87- <!-- path defaults to '/' since no name or path provided -->
88- <Route handler ={App}>
89- <!-- path is automatically assigned to the name since it is omitted -->
90- <Route name =" about" handler ={About}/>
91- <Route name =" users" handler ={Users}>
92- <!-- note the dynamic segment in the path -->
93- <Route name =" user" handler ={User} path =" /user/:id"
94- </Route >
37+ <!-- `path` defaults to '/' since no name or path provided -->
38+ <Route handler ={App}>
39+ <!-- path is automatically assigned to the name since it is omitted -->
40+ <Route name =" about" handler ={About}/>
41+ <Route name =" users" handler ={Users}>
42+ <!--
43+ note the dynamic segment in the path, and that it starts with `/`,
44+ which makes it "absolute", or rather, it doesn't inherit the path
45+ from the parent route
46+ -->
47+ <Route name =" user" handler ={User} path =" /user/:id"
9548 </Route >
96- </Routes >
49+ </Route >
9750```
9851
52+ [ overview ] :/docs/guides/overview.md
9953 [ path-matching ] :/docs/guides/path-matching.md
0 commit comments