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
106
107
108
|
API: `RouteHandler` (component)
===============================
The component supplied to a route is called a "Route Handler". They are
rendered when their route is active. There are some special props and
static methods available to these components.
Props
-----
### `activeRouteHandler(extraProps)`
Render the active nested route handler with this property, passing in
additional properties as needed. This is the mechanism by which you get
effortless nested UI.
#### Example
```js
var App = React.createClass({
render: function() {
<div>
<h1>Address Book</h1>
{/* the active child route handler will be rendered here */}
{/* you can "trickle down" props to the active child */}
<this.props.activeRouteHandler someProp="foo" />
</div>
}
});
var Contact = React.createClass({
render: function() {
return <h1>{this.props.params.id}</h1>
}
});
var routes = (
<Routes>
<Route handler={App}>
<Route name="contact" path="/contact/:id" handler={Contact}>
</Route>
</Routes>
);
React.renderComponent(routes, document.body);
```
### `params`
When a route has dynamic segments like `<Route path="users/:userId"/>`,
the dynamic values from the url are available at
`this.props.params.userId`, etc.
### `query`
The query parameters from the url.
Static Lifecycle Methods
------------------------
You can define static methods on your route handlers that will be called
during route transitions.
### `willTransitionTo(transition, params, query)`
Called when a route is about to render, giving you the opportunity to
abort or redirect the transition. You can return a promise and the whole
route hierarchy will wait for the promises to resolve before proceeding.
See also: [transition](/docs/api/misc/transition.md)
### `willTransitionFrom(transition, component)`
Called when an active route is being transitioned out giving you an
opportunity to abort the transition. The `component` is the current
component, you'll probably need it to check its state to decide if you
want to allow the transition.
See also: [transition](/docs/api/misc/transition.md)
#### Example
```js
var Settings = React.createClass({
statics: {
willTransitionTo: function(transition, params) {
return auth.isLoggedIn().then(function(loggedIn) {
if (!loggedIn)
return;
transition.abort();
return auth.logIn({transition: transition});
// in auth module call `transition.retry()` after being logged in
});
},
willTransitionFrom: function(transition, component) {
if (component.formHasUnsavedData())) {
if (!confirm('You have unsaved information, are you sure you want to leave this page?')) {
transition.abort();
}
}
}
}
//...
});
```
|
