diff --git a/examples/animations/app.js b/examples/animations/app.js
index 48f28c3f..9ef1952d 100644
--- a/examples/animations/app.js
+++ b/examples/animations/app.js
@@ -1,14 +1,16 @@
-// TODO: animations aren't happening, not sure what the problem is
var React = require('react');
var TransitionGroup = require('react/lib/ReactCSSTransitionGroup');
var Router = require('react-router');
var { Route, RouteHandler, Link } = Router;
var App = React.createClass({
- mixins: [ Router.State ],
+
+ contextTypes: {
+ router: React.PropTypes.func.isRequired
+ },
render: function () {
- var name = this.getRoutes().slice(0).reverse()[0].name;
+ var name = this.context.router.getCurrentRoutes().slice(0).reverse()[0].name;
return (
@@ -48,8 +50,8 @@ var Page2 = React.createClass({
var routes = (
-
-
+
+
);
diff --git a/examples/auth-flow/app.js b/examples/auth-flow/app.js
index 75491f54..b4922bf1 100644
--- a/examples/auth-flow/app.js
+++ b/examples/auth-flow/app.js
@@ -1,6 +1,6 @@
var React = require('react');
var Router = require('react-router');
-var { Route, RouteHandler, Link, State } = Router;
+var { Route, RouteHandler, Link } = Router;
var App = React.createClass({
getInitialState: function () {
@@ -65,7 +65,10 @@ var Dashboard = React.createClass({
});
var Login = React.createClass({
- mixins: [ Router.Navigation, State],
+
+ contextTypes: {
+ router: React.PropTypes.func.isRequired
+ },
getInitialState: function () {
return {
@@ -75,7 +78,8 @@ var Login = React.createClass({
handleSubmit: function (event) {
event.preventDefault();
- var nextPath = this.getQuery().nextPath;
+ var { router } = this.context;
+ var nextPath = router.getCurrentQuery().nextPath;
var email = this.refs.email.getDOMNode().value;
var pass = this.refs.pass.getDOMNode().value;
auth.login(email, pass, function (loggedIn) {
@@ -83,9 +87,9 @@ var Login = React.createClass({
return this.setState({ error: true });
if (nextPath) {
- this.replaceWith(nextPath);
+ router.replaceWith(nextPath);
} else {
- this.replaceWith('/about');
+ router.replaceWith('/about');
}
}.bind(this));
},
@@ -164,7 +168,7 @@ function pretendRequest(email, pass, cb) {
if (email === 'joe@example.com' && pass === 'password1') {
cb({
authenticated: true,
- token: Math.random().toString(36).substring(7),
+ token: Math.random().toString(36).substring(7)
});
} else {
cb({authenticated: false});
diff --git a/examples/data-flow/app.js b/examples/data-flow/app.js
index d6fdb688..c75ee167 100644
--- a/examples/data-flow/app.js
+++ b/examples/data-flow/app.js
@@ -4,7 +4,9 @@ var { Route, RouteHandler, Link } = Router;
var App = React.createClass({
- mixins: [ Router.Navigation ],
+ contextTypes: {
+ router: React.PropTypes.func.isRequired
+ },
getInitialState: function () {
return {
@@ -28,7 +30,7 @@ var App = React.createClass({
return taco.name != removedTaco;
});
this.setState({tacos: tacos});
- this.transitionTo('/');
+ this.context.router.transitionTo('/');
},
render: function () {
@@ -54,16 +56,19 @@ var App = React.createClass({
});
var Taco = React.createClass({
- mixins: [ Router.State ],
+
+ contextTypes: {
+ router: React.PropTypes.func.isRequired
+ },
remove: function () {
- this.props.onRemoveTaco(this.getParams().name);
+ this.props.onRemoveTaco(this.context.router.getCurrentParams().name);
},
render: function () {
return (
-
{this.getParams().name}
+
{this.context.router.getCurrentParams().name}
);
diff --git a/examples/dynamic-segments/app.js b/examples/dynamic-segments/app.js
index 44022f9f..1ae0453f 100644
--- a/examples/dynamic-segments/app.js
+++ b/examples/dynamic-segments/app.js
@@ -17,10 +17,13 @@ var App = React.createClass({
});
var User = React.createClass({
- mixins: [ Router.State ],
+
+ contextTypes: {
+ router: React.PropTypes.func.isRequired
+ },
render () {
- var { userId } = this.getParams();
+ var { userId } = this.context.router.getCurrentParams();
return (
User id: {userId}
@@ -36,10 +39,13 @@ var User = React.createClass({
var Task = React.createClass({
- mixins: [ Router.State ],
+
+ contextTypes: {
+ router: React.PropTypes.func.isRequired
+ },
render () {
- var { userId, taskId } = this.getParams();
+ var { userId, taskId } = this.context.router.getCurrentParams();
return (
User id: {userId}
diff --git a/examples/master-detail/app.js b/examples/master-detail/app.js
index 1846ae46..1b84b8fe 100644
--- a/examples/master-detail/app.js
+++ b/examples/master-detail/app.js
@@ -68,10 +68,12 @@ var Index = React.createClass({
var Contact = React.createClass({
- mixins: [ Router.Navigation, Router.State ],
+ contextTypes: {
+ router: React.PropTypes.func.isRequired
+ },
getStateFromStore: function () {
- var id = this.getParams().id;
+ var id = this.context.router.getCurrentParams().id;
return {
contact: ContactStore.getContact(id)
};
@@ -101,9 +103,10 @@ var Contact = React.createClass({
},
destroy: function () {
- var id = this.getParams().id;
+ var { router } = this.context;
+ var id = router.getCurrentParams().id;
ContactStore.removeContact(id);
- this.transitionTo('/');
+ router.transitionTo('/');
},
render: function () {
@@ -122,7 +125,9 @@ var Contact = React.createClass({
var NewContact = React.createClass({
- mixins: [ Router.Navigation ],
+ contextTypes: {
+ router: React.PropTypes.func.isRequired
+ },
createContact: function (event) {
event.preventDefault();
@@ -130,7 +135,7 @@ var NewContact = React.createClass({
first: this.refs.first.getDOMNode().value,
last: this.refs.last.getDOMNode().value
}, function (contact) {
- this.transitionTo('contact', { id: contact.id });
+ this.context.router.transitionTo('contact', { id: contact.id });
}.bind(this));
},
diff --git a/examples/query-params/app.js b/examples/query-params/app.js
index 4667ddd4..8a14d042 100644
--- a/examples/query-params/app.js
+++ b/examples/query-params/app.js
@@ -18,11 +18,15 @@ var App = React.createClass({
});
var User = React.createClass({
- mixins: [ Router.State ],
+
+ contextTypes: {
+ router: React.PropTypes.func.isRequired
+ },
render: function () {
- var age = this.getQuery().showAge ? '33' : '';
- var userID = this.getParams().userID;
+ var { router } = this.context;
+ var age = router.getCurrentQuery().showAge ? '33' : '';
+ var userID = router.getCurrentParams().userID;
return (
User id: {userID}
diff --git a/examples/rx/app.js b/examples/rx/app.js
index 1fcd158c..18456966 100644
--- a/examples/rx/app.js
+++ b/examples/rx/app.js
@@ -18,10 +18,13 @@ var App = React.createClass({
});
var User = React.createClass({
- mixins: [ Router.State ],
+
+ contextTypes: {
+ router: React.PropTypes.func.isRequired
+ },
render () {
- var { userId } = this.getParams();
+ var { userId } = this.context.router.getCurrentParams();
return (
User id: {userId}
diff --git a/examples/sidebar/app.js b/examples/sidebar/app.js
index 7d6baedc..ea42bff4 100644
--- a/examples/sidebar/app.js
+++ b/examples/sidebar/app.js
@@ -73,10 +73,13 @@ var Sidebar = React.createClass({
});
var App = React.createClass({
- mixins: [ Router.State ],
+
+ contextTypes: {
+ router: React.PropTypes.func.isRequired
+ },
render: function () {
- var activeCategory = this.getParams().category;
+ var activeCategory = this.context.router.getCurrentParams().category;
return (
@@ -89,10 +92,13 @@ var App = React.createClass({
});
var Item = React.createClass({
- mixins: [ Router.State ],
+
+ contextTypes: {
+ router: React.PropTypes.func.isRequired
+ },
render: function () {
- var params = this.getParams();
+ var params = this.context.router.getCurrentParams();
var category = data.lookupCategory(params.category);
var item = data.lookupItem(params.category, params.name);
return (
diff --git a/examples/simple-master-detail/app.js b/examples/simple-master-detail/app.js
index 5b4f4b13..d9d0dc61 100644
--- a/examples/simple-master-detail/app.js
+++ b/examples/simple-master-detail/app.js
@@ -38,14 +38,17 @@ var Index = React.createClass({
});
var State = React.createClass({
- mixins: [ Router.State ],
+
+ contextTypes: {
+ router: React.PropTypes.func.isRequired
+ },
imageUrl: function (name) {
return "http://www.50states.com/maps/" + underscore(name) + ".gif";
},
render: function () {
- var unitedState = findState(this.getParams().abbr);
+ var unitedState = findState(this.context.router.getCurrentParams().abbr);
return (