1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
API: `Route` (component)
=========================
Configuration component to declare your application's routes and view hierarchy.
Props
-----
### `name`
The name of the route, used in the `Link` component and the router's
transition methods.
### `path`
The path used in the URL. If left undefined, the path will be defined by
the `name`, and if there is no name, will default to `/`.
Please refer to the [Path Matching Guide][path-matching] to learn more
about supported path matching syntax.
### `handler`
The component to be rendered when the route is active.
### `addHandlerKey`
Defaults to `false`.
If you have dynamic segments in your URL, a transition from `/users/123`
to `/users/456` does not call `getInitialState`, `componentWillMount` or
`componentWillUnmount`. If you are using those lifecycle hooks to fetch
data and set state, you will also need to implement
`componentWillReceiveProps` on your handler, just like any other
component with changing props. This way, you can leverage the
performance of the React DOM diff algorithm. Look at the `Contact`
handler in the `master-detail` example.
If you'd rather be lazy, set this to `true` and the router will add a
key to your route, causing all new DOM to be built, and then the life
cycle hooks will all be called.
You will want this to be `true` if you're doing animations with React's
TransitionGroup component.
### `preserveScrollPosition`
If `true`, the router will not scroll the window up when the route is
transitioned to. Defaults to `false`. Ignored if the parent `<Routes/>`
has been set to `true`.
### `children`
Routes can be nested. When a child route matches, the parent route's
handler will have the child route's handler available as
`this.props.activeRouteHandler`. You can then render it in the parent
passing in any additional props as needed.
### `[prop]`
Any additional, user-defined, properties will be become properties of
the rendered handler.
#### Example:
```js
var App;
var foo = "hello";
var routes = (
<Routes>
// pass `foo` to `something`
<Route handler={App} something={foo}/>
</Routes>
);
App = React.createClass({
render: function() {
// access `something` on props
return <div>{this.props.something}</div>
}
});
React.renderComponent(routes, document.body);
document.body.innerHTML // -> <div>hello</div>
```
Example
-------
```xml
<Routes>
<!-- path defaults to '/' since no name or path provided -->
<Route handler={App}>
<!-- path is automatically assigned to the name since it is omitted -->
<Route name="about" handler={About}/>
<Route name="users" handler={Users}>
<!-- note the dynamic segment in the path -->
<Route name="user" handler={User} path="/user/:id"/>
</Route>
</Route>
</Routes>
```
[path-matching]:/docs/guides/path-matching.md
|
