Skip to content

Commit 277acd5

Browse files
committed
Added documentation for skipping dynamic segment transition optimization. Re: #793
1 parent b5cd3d0 commit 277acd5

File tree

1 file changed

+26
-1
lines changed

1 file changed

+26
-1
lines changed

docs/guides/overview.md

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,11 +352,36 @@ Important Note About Dynamic Segments
352352
If you have dynamic segments in your URL, a transition from `/users/123`
353353
to `/users/456` does not call `getInitialState`, `componentWillMount`, `componentWillUnmount` or `componentDidMount`. If you are using those lifecycle hooks to fetch
354354
data and set state, you will also need to implement
355-
`componentWillReceiveProps` on your handler, just like any other
355+
`componentWillReceiveProps` on your handler, and its child components, just like any other
356356
component whose props are changing. This way you can leverage the
357357
performance of the React DOM diff algorithm. Look at the `Contact`
358358
handler [in the `master-detail` example](https://github.com/rackt/react-router/blob/master/examples/master-detail/app.js).
359359

360+
If you would rather mount components normally when transitioning between dynamic segments, you can assign a unique key to your route handler component to bypass this optimization:
361+
362+
```js
363+
var App = React.createClass({
364+
365+
mixins: [Router.State],
366+
367+
getHandlerKey: function () {
368+
var childDepth = 1;
369+
var key = this.getRoutes()[childDepth].name;
370+
var id = this.getParams().id;
371+
if (id) { key += id; }
372+
return key;
373+
},
374+
375+
render: function () {
376+
return (
377+
<div>
378+
<RouteHandler key={this.getHandlerKey()} />
379+
</div>
380+
);
381+
}
382+
});
383+
```
384+
360385
Scrolling
361386
---------
362387

0 commit comments

Comments
 (0)