Skip to content

Commit 21f4f57

Browse files
committed
[added] preserveScrollPosition Route/Routes props
closes #121
1 parent d63e85b commit 21f4f57

File tree

4 files changed

+38
-4
lines changed

4 files changed

+38
-4
lines changed

docs/api/components/Route.md

+6
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@ inherit the path of their parent.
2323

2424
The component to be rendered when the route is active.
2525

26+
### `preserveScrollPosition`
27+
28+
If `true`, the router will not scroll the window up when the route is
29+
transitioned to. Defaults to `false`. Ignored if the parent `<Routes/>`
30+
has been set to `true`.
31+
2632
### `children`
2733

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

docs/api/components/Routes.md

+9-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,15 @@ works without a server, if you use `history` your server will need to
1717
support it.
1818

1919
For browsers that don't support the HTML5 history API the router will
20-
fall back to `window.location` if you choose `history`. This way all
21-
users get the same urls and can share them.
20+
fall back to `window.location` if you choose `history`, in other words,
21+
the router will simply cause a full page reload. This way all users get
22+
the same urls and can share them.
23+
24+
### `preserveScrollPosition`
25+
26+
If `true`, the router will not scroll the window up globally when any
27+
route is transitioned to. Defaults to `false`. When `false`, the
28+
`<Route/>` gets to decide whether or not to scroll on transition.
2229

2330
Example
2431
-------

modules/components/Route.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,17 @@ var Route = React.createClass({
7272

7373
},
7474

75+
getDefaultProps: function() {
76+
return {
77+
preserveScrollPosition: false
78+
};
79+
},
80+
7581
propTypes: {
7682
handler: React.PropTypes.any.isRequired,
7783
path: React.PropTypes.string,
78-
name: React.PropTypes.string
84+
name: React.PropTypes.string,
85+
preserveScrollPosition: React.PropTypes.bool
7986
},
8087

8188
render: function () {

modules/components/Routes.js

+15-1
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,13 @@ var Routes = React.createClass({
5454

5555
propTypes: {
5656
location: React.PropTypes.oneOf([ 'hash', 'history' ]).isRequired,
57+
preserveScrollPosition: React.PropTypes.bool
5758
},
5859

5960
getDefaultProps: function () {
6061
return {
61-
location: 'hash'
62+
location: 'hash',
63+
preserveScrollPosition: false
6264
};
6365
},
6466

@@ -339,6 +341,8 @@ function syncWithTransition(routes, transition) {
339341
})
340342
};
341343

344+
// TODO: add functional test
345+
maybeScrollWindow(routes, toMatches[toMatches.length - 1]);
342346
routes.setState(state);
343347

344348
return state;
@@ -436,4 +440,14 @@ function reversedArray(array) {
436440
return array.slice(0).reverse();
437441
}
438442

443+
function maybeScrollWindow(routes, match) {
444+
if (routes.props.preserveScrollPosition)
445+
return;
446+
447+
if (!match || match.route.props.preserveScrollPosition)
448+
return;
449+
450+
window.scrollTo(0, 0);
451+
}
452+
439453
module.exports = Routes;

0 commit comments

Comments
 (0)