Skip to content

Commit 488ab04

Browse files
committed
updated docs
1 parent eafa1f7 commit 488ab04

File tree

12 files changed

+410
-86
lines changed

12 files changed

+410
-86
lines changed

UPGRADE_GUIDE.md

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,181 @@ To see discussion around these API changes, please refer to the
55
[changelog](/CHANGELOG.md) and visit the commits and issues they
66
reference.
77

8+
0.7.x -> 0.8.x
9+
--------------
10+
11+
### `ActiveState` mixin `isActive`
12+
13+
`isActive` is now an instance method.
14+
15+
```js
16+
// 0.7.x
17+
var SomethingActive = React.createClass({
18+
mixins: [ActiveState],
19+
20+
updateActiveState: function () {
21+
this.setState({
22+
isActive: SomethingActive.isActive(...)
23+
})
24+
}
25+
});
26+
27+
// 0.8.x
28+
var SomethingActive = React.createClass({
29+
mixins: [ActiveState],
30+
31+
updateActiveState: function () {
32+
this.setState({
33+
isActive: this.isActive(...)
34+
})
35+
}
36+
});
37+
```
38+
39+
### `<Routes onActiveStateChange/>` -> `PathState`
40+
41+
```js
42+
// 0.7.x
43+
<Routes onActiveStateChange={fn} />
44+
45+
// 0.8.x
46+
var App = React.createClass({
47+
mixins: [PathState],
48+
updatePath: fn
49+
});
50+
```
51+
52+
You may need access to the current routes, use the `RouteLookup` mixin
53+
for that along with `PathState`.
54+
55+
### `.` in params support
56+
57+
`.` used to be a delimiter like `/`, but now its a valid character in
58+
your params. If you were using this feature you'll need to do the split
59+
yourself.
60+
61+
```
62+
// 0.7.x
63+
var route = <Route path=":foo.:bar" />;
64+
65+
// 0.8.x
66+
var route = <Route path=":foobar" handler={Handler}/>
67+
68+
Handler = React.createClass({
69+
render: function() {
70+
var split = this.props.params.foobar.split('.');
71+
var foo = split[0];
72+
var bar = split[1];
73+
// ...
74+
}
75+
});
76+
```
77+
78+
### `transition.retry()`
79+
80+
`transition.retry()` used to use `transitionTo`, creating a new history
81+
entry, it now uses `replaceWith`.
82+
83+
```js
84+
// 0.7.x
85+
React.createClass({
86+
login: function() {
87+
// ...
88+
transition.retry();
89+
}
90+
});
91+
92+
// 0.8.x
93+
React.createClass({
94+
mixins: [Transitions],
95+
login: function() {
96+
// ...
97+
this.transitionTo(transition.path);
98+
}
99+
});
100+
```
101+
102+
### Returning promises from transition hooks
103+
104+
Transition hooks are now sync, unless you opt-in to async with
105+
`transition.wait(promise)`.
106+
107+
```js
108+
// 0.7.x
109+
React.createClass({
110+
statics: {
111+
willTransitionTo: function(transition) {
112+
return somePromise();
113+
}
114+
}
115+
});
116+
117+
// 0.8.x
118+
React.createClass({
119+
statics: {
120+
willTransitionTo: function(transition) {
121+
transition.wait(somePromise());
122+
}
123+
}
124+
});
125+
```
126+
127+
### `preserveScrollPosition` -> `scrollBehavior`
128+
129+
`preserveScrollPosition` was totally broken and should have been named
130+
`perverseScrollPosition`.
131+
132+
There are now three scroll behaviors you can use:
133+
134+
- `'imitateBrowser'`
135+
- `'scrollToTop'`
136+
- `'none'`
137+
138+
`imitateBrowser` is the default, and imitates what browsers do in a
139+
typical page reload scenario (preserves scroll positions when using the
140+
back button, scrolls up when you come to a new page, etc.)
141+
142+
Also, you can't specify scroll behavior per `<Route/>` anymore.
143+
144+
```
145+
<Routes scrollBehavior="scrollToTop"/>
146+
```
147+
148+
### RouteStore
149+
150+
This was not a public module, but we know some people were using it.
151+
It's gone now. We have made getting at the current routes incredibly
152+
convenient now with the `RouteLookup` mixin.
153+
154+
### `Router.transitionTo, replaceWith, goBack`
155+
156+
These methods have been moved to mixins.
157+
158+
```js
159+
var Router = require('react-router');
160+
161+
// 0.7.x
162+
React.createClass({
163+
whenever: function() {
164+
Router.transitionTo('something');
165+
Router.replaceWith('something');
166+
Router.goBack();
167+
}
168+
});
169+
170+
// 0.8.x
171+
React.createClass({
172+
mixins: [Router.Transitions],
173+
whenever: function() {
174+
this.transitionTo('something');
175+
this.replaceWith('something');
176+
this.goBack();
177+
}
178+
});
179+
```
180+
181+
182+
8183
0.6.x -> 0.7.x
9184
--------------
10185

docs/api/Router.md

Lines changed: 19 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,30 @@
11
API: `Router`
22
=============
33

4-
The main export, `Router`, contains several methods that may be used to
5-
navigate around the application.
4+
The main export of this library.
65

76
```js
87
// cjs modules
98
var Router = require('react-router')
109

1110
// or global build
12-
window.ReactRouter
11+
var Router = window.ReactRouter
12+
13+
// contains these exports
14+
15+
// components
16+
Router.DefaultRoute
17+
Router.Link
18+
Router.NotFoundRoute
19+
Router.Redirect
20+
Router.Route
21+
Router.Routes
22+
23+
// mixins
24+
Router.ActiveState
25+
Router.AsyncState
26+
Router.PathState
27+
Router.RouteLookup
28+
Router.Transitions
1329
```
1430

15-
Methods
16-
-------
17-
18-
### `transitionTo(routeNameOrPath, [params[, query]])`
19-
20-
Programmatically transition to a new route.
21-
22-
#### Examples
23-
24-
```js
25-
Router.transitionTo('user', {id: 10}, {showAge: true});
26-
Router.transitionTo('about');
27-
Router.transitionTo('/users/10?showAge=true');
28-
```
29-
30-
### `replaceWith(routeNameOrPath, [params[, query]])`
31-
32-
Programmatically replace current route with a new route. Does not add an
33-
entry into the browser history.
34-
35-
#### Examples
36-
37-
```js
38-
Router.replaceWith('user', {id: 10}, {showAge: true});
39-
Router.replaceWith('about');
40-
Router.replaceWith('/users/10?showAge=true');
41-
```
42-
43-
### `goBack()`
44-
45-
Programmatically go back to the last route and remove the most recent
46-
entry from the browser history.
47-
48-
#### Example
49-
50-
```js
51-
Router.goBack();
52-
```
53-
54-
### `makeHref(routeName, params, query)`
55-
56-
Creates an `href` to a route. Use this along with `ActiveState` when you
57-
need to build components similar to `Link`.
58-
59-
#### Example
60-
61-
```js
62-
// given a route like this:
63-
<Route name="user" path="users/:userId"/>
64-
Router.makeHref('user', {userId: 123}); // "users/123"
65-
```

docs/api/components/Route.md

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,6 @@ cycle hooks will all be called.
4343
You will want this to be `true` if you're doing animations with React's
4444
TransitionGroup component.
4545

46-
### `preserveScrollPosition`
47-
48-
If `true`, the router will not scroll the window up when the route is
49-
transitioned to. Defaults to `false`. Ignored if the parent `<Routes/>`
50-
has been set to `true`.
51-
5246
### `children`
5347

5448
Routes can be nested. When a child route matches, the parent route's

docs/api/components/RouteHandler.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@ during route transitions.
6868
### `willTransitionTo(transition, params, query)`
6969

7070
Called when a route is about to render, giving you the opportunity to
71-
abort or redirect the transition. You can return a promise and the whole
72-
route hierarchy will wait for the promises to resolve before proceeding.
71+
abort or redirect the transition. You can pause the transition while you
72+
do some asynchonous work with `transition.wait(promise)`.
7373

7474
See also: [transition](/docs/api/misc/transition.md)
7575

docs/api/components/Routes.md

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ Props
1010

1111
### `location`
1212

13-
One of `"hash"`, `"history"` or a user defined location implementation,
14-
defaults to `"hash"`.
13+
One of `"hash"`, `"history"`, `'none'`, or a user defined location
14+
implementation, defaults to `"hash"`.
1515

1616
`"hash"` includes `#/` in the url and works without a server, if you use
1717
`history` your server will need to support it.
@@ -23,23 +23,29 @@ the same urls and can share them.
2323

2424
See also: [user supplied locations][Location].
2525

26-
### `preserveScrollPosition`
26+
### `scrollBehavior`
2727

28-
If `true`, the router will not scroll the window up globally when any
29-
route is transitioned to. Defaults to `false`. When `false`, the
30-
`<Route/>` gets to decide whether or not to scroll on transition.
28+
Determines the scrolling behavior after route transitions.
3129

32-
### `onAbortedTransition`
30+
One of:
3331

34-
A function called when any transition is aborted.
32+
- `'imitateBrowser'` - default, imitates what browsers do in a typical
33+
page reload scenario: preserves scroll positions when using the back
34+
button, scrolls up when you come to a new route by clicking a link,
35+
etc.
3536

36-
### `onActiveStateChange`
37+
- `'scrollToTop'` - scrolls the window up all the time.
3738

38-
A function called when the active routes change.
39+
- `'none'` - doesn't do anything (you should probably do something about
40+
that).
3941

40-
#### signature
42+
### `fixedPath`
43+
44+
TODO
4145

42-
`function(nextState)`
46+
### `onAbortedTransition`
47+
48+
A function called when any transition is aborted.
4349

4450
### `onTransitionError`
4551

docs/api/misc/transition.md

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,13 @@ Redirect to another route.
1717

1818
### `retry()`
1919

20-
Retrys a transition. Typically you save off a transition you care to
21-
return to, finish the workflow, then retry.
20+
Retries a transition. Typically you save off a transition you care to
21+
return to, finish the workflow, then retry. This does not create a new
22+
entry in the browser history.
23+
24+
### `wait(promise)`
25+
26+
Will pause the transition until the promise resolves.
2227

2328
[transition-hooks]:/docs/api/components/RouteHandler.md#static-lifecycle-methods
2429

docs/api/mixins/ActiveState.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ API: `ActiveState` (mixin)
44
A mixin for components that need to know about the routes, params, and
55
query that are currently active (like links).
66

7-
Static Methods
8-
--------------
7+
Instance Methods
8+
----------------
99

1010
### `isActive(routeName, params, query)`
1111

@@ -39,7 +39,7 @@ var Tab = React.createClass({
3939

4040
updateActiveState: function () {
4141
this.setState({
42-
isActive: Tab.isActive(this.props.to, this.props.params, this.props.query)
42+
isActive: this.isActive(this.props.to, this.props.params, this.props.query)
4343
})
4444
},
4545

docs/api/mixins/AsyncState.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
API: `AsyncState` (mixin)
22
=========================
33

4+
**WARNING**: This API is not going to be around much longer, don't use
5+
it. We are taking a different approach that will be added very soon.
6+
7+
So, anyway, you may continue...
8+
49
A mixin for route handlers that fetch at least part of their state
510
asynchronously.
611

0 commit comments

Comments
 (0)