Releases: remix-run/react-router
v0.13.0
React introduced the ability to use ES6 classes for component definitions, which has the side-effect of mixins not being "the thing" anymore. Our mixins like State and Navigation just proxied calls to some methods on an undocumented feature of React called context, that in turn called methods on the router instance under the hood.
Without mixins we needed a way for you to get access to these methods. We decided the simplest solution was to stop hiding the router instance and just put the whole thing on context.
You can think about context as values that are floating around a render tree that parent components (Handler in the Router.run callback) can explicitly define and descendent components can explicitly ask for. The stuff on context doesn't show up in a component unless you ask for it.
Note: You can still use our mixins, you'll just get a deprecation warning.
// 0.12.x
var Foo = React.createClass({
mixins: [ Router.State ],
render: function () {
var id = this.getParams().id;
var searchTerm = this.getQuery().searchTerm;
// etc. ...
}
});
// 0.13.x w/o ES6 fanciness
var Foo = React.createClass({
contextTypes: {
router: React.PropTypes.func
},
render: function () {
var router = this.context.router;
var id = router.getCurrentParams().id;
var searchTerm = router.getCurrentQuery().searchTerm;
// etc.
}
});
// 0.13.x w/ ES6 fanciness
class Foo extends React.Component {
render () {
var { router } = this.context;
var id = router.getCurrentParams().id;
var searchTerm = router.getCurrentQuery().searchTerm;
// etc.
}
}
Foo.contextTypes = {
router: React.PropTypes.func
};Most of the time we prefer to just pass the state down the props tree
and not mess with context:
Router.run(routes, (Handler, state) => {
React.render(<Handler {...state}/>, document.body);
});
// and then when rendering route handlers, keep passing it down
<RouteHandler {...this.props}/>
// and then in your methods you have what you need on props
var id = this.props.params.id;
var searchTerm = this.props.query.searchTerm;Changes
v0.12.4
v0.12.3
v0.12.2
v0.12.1
- 3d8a883 [fixed] Ignore extraneous popstate events in WebKit
- db2607d [fixed] Double-encoding of URLs
- c5a24a5 [added] Route/Match classes
- ae6fcda [changed] Rename Scrolling => ScrollHistory
- f975bdf [fixed] allow a StaticLocation to be passed directly when creating a router
- 7d52d55 [changed] TestLocation is a constructor
- 193222e [added] StaticLocation, for server-side rendering
- e05e229 [added] Transition#cancel
- 04ba639 [added] Link activeStyle property
- 585d8ec [fixed] Use more correct children invariant
- 62c49d2 [changed] Change Navigation to return the result of goBack()
- 83c8f59 [fixed] Allow special characters in query
v0.12.0
transition.wait was removed, you now use a callback instead:
// 0.11.x
var SomeHandler = React.createClass({
statics: {
willTransitionTo (transition) {
transition.wait(somePromise());
}
}
});
// 0.12.0
var SomeHandler = React.createClass({
statics: {
willTransitionTo (transition, params, query, callback) {
somePromise().then(callback);
}
}
});Changes
- cd2087d [added] default handler to routes
- 848361e [fixed] Clean up mounted route component on unmount so we don't leak references
- 5bcf653 [fixed] Double slash in href when parent route has optional trailing slash
- e280efd [changed] Don't restore scroll position on Forward
- 20c2c9b [fixed] Do not decode + in pathname
- fe5ec39 [fixed] Double-encoding of query strings
- df38294 [fixed] Allow comments in JSX config
- 84056ba [fixed] Ignore falsy routes
- 4a770e8 [fixed] Using TestLocation without DOM
- 2ac2510 [added] router.replaceRoutes(children)
- 1f81286 [fixed] Ignore stale transitions
- c6ed6fa [removed] transition.wait, use callbacks instead
- 75c6206 [added] router.stop()
- 4e96256 [fixed] Preserve original query with HashLocation
- 2f19e63 [changed] Bump qs dependency version