@@ -20,20 +20,18 @@ descriptors — `Location` and `NotFound`.
20
20
var Locations = Router.Locations
21
21
var Location = Router.Location
22
22
23
+ var MainPage = React.createClass(...)
24
+ var UserPage = React.createClass(...)
25
+ var NotFoundPage = React.createClass(...)
26
+
23
27
var App = React.createClass({
24
28
25
29
render: function() {
26
30
return (
27
31
<Locations>
28
- <Location path="/">
29
- {function() { return <div>Main page</div> }}
30
- </Location>
31
- <Location path="/users/:username">
32
- {function(props) { return <div>{props.username}'s page</div> }}
33
- </Location>
34
- <NotFound>
35
- {function() { return <div>404!</div> }}
36
- </NotFound>
32
+ <Location path="/" handler={MainPage} />
33
+ <Location path="/users/:username" handler={UserPage} />
34
+ <NotFound handler={NotFoundPage} />
37
35
</Locations>
38
36
)
39
37
}
@@ -42,14 +40,6 @@ descriptors — `Location` and `NotFound`.
42
40
That way ` App ` will render a markup for a currently active location (via
43
41
` window.location.pathname ` ).
44
42
45
- If you don't want to specify handlers for each location inline you can pass them
46
- a ` handler ` prop with a component class instead:
47
-
48
- <Locations>
49
- <Location path="/" handler={MainPage} />
50
- <Location path="/users/:username" handler={UserPage} />
51
- </Locations>
52
-
53
43
It automatically handles ` popstate ` event and updates its state accordingly.
54
44
55
45
To navigate to a different location, component exposes ` navigate(path) ` method.
0 commit comments