Convert usage of router from context to using withRouter

js/components/ascribe_detail/edition_action_panel.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
@@ -33,20 +34,17 @@ import { getLangText } from '../../utils/lang_utils';
     A component that handles all the actions inside of the edition detail
     handleSuccess requires a loadEdition action (could be refactored)
  */
-let EditionActionPanel = React.createClass({
+const EditionActionPanel = React.createClass({
     propTypes: {
         currentUser: React.PropTypes.object.isRequired,
         edition: React.PropTypes.object.isRequired,
+        router: React.PropTypes.object.isRequired,
         whitelabel: React.PropTypes.object.isRequired,
 
         actionPanelButtonListType: React.PropTypes.func,
         handleSuccess: React.PropTypes.func
     },
 
-    contextTypes: {
-        router: React.PropTypes.object.isRequired
-    },
-
     getDefaultProps() {
         return {
             actionPanelButtonListType: AclButtonList
@@ -78,7 +76,7 @@ let EditionActionPanel = React.createClass({
         const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.context.router.push('/collection');
+        this.props.router.push('/collection');
     },
 
     refreshCollection() {
@@ -190,4 +188,4 @@ let EditionActionPanel = React.createClass({
     }
 });
 
-export default EditionActionPanel;
+export default withRouter(EditionActionPanel);

js/components/ascribe_detail/piece_container.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 import Moment from 'moment';
 
 import ReactError from '../../mixins/react_error';
@@ -46,8 +47,10 @@ import { setDocumentTitle } from '../../utils/dom_utils';
 /**
  * This is the component that implements resource/data specific functionality
  */
-let PieceContainer = React.createClass({
+const PieceContainer = React.createClass({
     propTypes: {
+        router: React.PropTypes.object.isRequired,
+
         furtherDetailsType: React.PropTypes.func,
 
         // Provided from AscribeApp
@@ -59,10 +62,6 @@ let PieceContainer = React.createClass({
         params: React.PropTypes.object
     },
 
-    contextTypes: {
-        router: React.PropTypes.object.isRequired
-    },
-
     mixins: [ReactError],
 
     getDefaultProps() {
@@ -167,7 +166,7 @@ let PieceContainer = React.createClass({
         const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.context.router.push('/collection');
+        this.props.router.push('/collection');
     },
 
     getCreateEditionsDialog() {
@@ -347,4 +346,4 @@ let PieceContainer = React.createClass({
     }
 });
 
-export default PieceContainer;
+export default withRouter(PieceContainer);

js/components/ascribe_forms/form_send_contract_agreement.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 
 import ContractListActions from '../../actions/contract_list_actions';
 import ContractListStore from '../../stores/contract_list_store';
@@ -19,15 +20,11 @@ import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
 
 
-let SendContractAgreementForm = React.createClass({
+const SendContractAgreementForm = React.createClass({
     propTypes: {
         handleSuccess: React.PropTypes.func
     },
 
-    contextTypes: {
-        router: React.PropTypes.object
-    },
-
     getInitialState() {
         return mergeOptions(
             ContractListStore.getState(),
@@ -58,7 +55,7 @@ let SendContractAgreementForm = React.createClass({
         const notification = new GlobalNotificationModel(getLangText('Contract agreement sent'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.context.router.push('/collection');
+        this.props.router.push('/collection');
     },
 
     getFormData() {
@@ -152,4 +149,4 @@ let SendContractAgreementForm = React.createClass({
     }
 });
 
-export default SendContractAgreementForm;
+export default withRouter(SendContractAgreementForm);

js/components/ascribe_routes/proxy_handler.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 
 import UserStore from '../../stores/user_store';
 
@@ -75,10 +76,12 @@ export function AuthRedirect({ to, when }) {
  */
 export function ProxyHandler(...redirectFunctions) {
     return (Component) => (
-        React.createClass({
+        withRouter(React.createClass({
             displayName: 'ProxyHandler',
 
             propTypes: {
+                router: React.PropTypes.object.isRequired,
+
                 // Provided from AscribeApp, after the routes have been initialized
                 currentUser: React.PropTypes.object,
                 whitelabel: React.PropTypes.object,
@@ -88,10 +91,6 @@ export function ProxyHandler(...redirectFunctions) {
                 route: object
             },
 
-            contextTypes: {
-                router: object
-            },
-
             childContextTypes: {
                 route: object
             },
@@ -111,7 +110,7 @@ export function ProxyHandler(...redirectFunctions) {
             },
 
             evaluateRedirectFunctions(props = this.props) {
-                const { currentUser, location: { query } } = props;
+                const { currentUser, location: { query }, router } = props;
 
                 if (UserStore.hasLoaded() && !UserStore.isLoading()) {
                     for (let i = 0; i < redirectFunctions.length; i++) {
@@ -119,7 +118,7 @@ export function ProxyHandler(...redirectFunctions) {
                         // it should return `true` and therefore
                         // stop/avoid the execution of all functions
                         // that follow
-                        if (redirectFunctions[i](this.context.router, currentUser, query)) {
+                        if (redirectFunctions[i](router, currentUser, query)) {
                             break;
                         }
                     }
@@ -132,5 +131,5 @@ export function ProxyHandler(...redirectFunctions) {
                 );
             }
         })
-    );
+    ));
 }

js/components/ascribe_slides_container/slides_container.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 
 import SlidesContainerBreadcrumbs from './slides_container_breadcrumbs';
 
@@ -9,9 +10,10 @@ const { arrayOf, element, bool, shape, string, object } = React.PropTypes;
 
 const SlidesContainer = React.createClass({
     propTypes: {
-        children: arrayOf(element),
         forwardProcess: bool.isRequired,
+        router: object.isRequired,
 
+        children: arrayOf(element),
         glyphiconClassNames: shape({
             pending: string,
             complete: string
@@ -21,8 +23,7 @@ const SlidesContainer = React.createClass({
     },
 
     contextTypes: {
-        route: object.isRequired,
+        route: object.isRequired
-        router: object.isRequired
     },
 
     getInitialState() {
@@ -42,8 +43,7 @@ const SlidesContainer = React.createClass({
 
         // Since react-router 2.0.0, we need to define the `routerWillLeave`
         // method ourselves.
-        const { router, route } = this.context;
+        this.props.router.setRouteLeaveHook(this.context.route, this.routerWillLeave);
-        router.setRouteLeaveHook(route, this.routerWillLeave);
     },
 
     componentWillUnmount() {
@@ -68,10 +68,10 @@ const SlidesContainer = React.createClass({
     },
 
     setSlideNum(nextSlideNum, additionalQueryParams = {}) {
-        const { location: { pathname, query } } = this.props;
+        const { location: { pathname, query }, router } = this.props;
         const slideQuery = Object.assign({}, query, additionalQueryParams, { slide_num: nextSlideNum });
 
-        this.context.router.push({ pathname, query: slideQuery });
+        router.push({ pathname, query: slideQuery });
     },
 
     // breadcrumbs are defined as attributes of the slides.
@@ -186,4 +186,4 @@ const SlidesContainer = React.createClass({
     }
 });
 
-export default SlidesContainer;
+export default withRouter(SlidesContainer);

js/components/password_reset_container.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 
 import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
@@ -107,16 +108,14 @@ let PasswordRequestResetForm = React.createClass({
     }
 });
 
-let PasswordResetForm = React.createClass({
+let PasswordResetForm = withRouter(React.createClass({
     propTypes: {
+        router: React.PropTypes.object.isRequired,
+
         email: React.PropTypes.string,
         token: React.PropTypes.string
     },
 
-    contextTypes: {
-        router: React.PropTypes.object.isRequired
-    },
-
     getFormData() {
         return {
             email: this.props.email,
@@ -125,7 +124,7 @@ let PasswordResetForm = React.createClass({
     },
 
     handleSuccess() {
-        this.context.router.push('/collection');
+        this.props.router.push('/collection');
 
         const notification = new GlobalNotificationModel(getLangText('Password successfully updated'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
@@ -176,6 +175,6 @@ let PasswordResetForm = React.createClass({
             </Form>
         );
     }
-});
+}));
 
 export default PasswordResetContainer;

js/components/piece_list.js

@@ -1,6 +1,5 @@
-'use strict';
-
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 
 import PieceListStore from '../stores/piece_list_store';
 import PieceListActions from '../actions/piece_list_actions';
@@ -30,8 +29,10 @@ import { getLangText } from '../utils/lang_utils';
 import { setDocumentTitle } from '../utils/dom_utils';
 
 
-let PieceList = React.createClass({
+const PieceList = React.createClass({
     propTypes: {
+        router: React.PropTypes.object.isRequired,
+
         accordionListItemType: React.PropTypes.func,
         bulkModalButtonListType: React.PropTypes.func,
         canLoadPieceList: React.PropTypes.bool,
@@ -54,10 +55,6 @@ let PieceList = React.createClass({
         location: React.PropTypes.object
     },
 
-    contextTypes: {
-        router: React.PropTypes.object.isRequired
-    },
-
     getDefaultProps() {
         return {
             accordionListItemType: AccordionListItemWallet,
@@ -130,13 +127,13 @@ let PieceList = React.createClass({
     },
 
     componentDidUpdate() {
-        const { location: { query }, redirectTo, shouldRedirect } = this.props;
+        const { location: { query }, redirectTo, router, shouldRedirect } = this.props;
         const { unfilteredPieceListCount } = this.state;
 
         if (redirectTo && redirectTo.pathname &&
             (typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) {
             // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.context.router.push({
+            window.setTimeout(() => router.push({
                 // Occasionally, the back end also sets query parameters for Onion.
                 // We need to consider this by merging all passed query parameters, as we'll
                 // otherwise end up in a 404 screen
@@ -196,14 +193,14 @@ let PieceList = React.createClass({
     },
 
     searchFor(search) {
-        const { location: { pathname } } = this.props;
+        const { location: { pathname }, router } = this.props;
 
         this.loadPieceList({ search, page: 1 });
-        this.context.router.push({ pathname, query: { page: 1 } });
+        router.push({ pathname, query: { page: 1 } });
     },
 
     applyFilterBy(filterBy) {
-        const { pathname } = this.props.location;
+        const { location: { pathname }, router } = this.props;
 
         this.setState({
             isFilterDirty: true
@@ -229,7 +226,7 @@ let PieceList = React.createClass({
 
         // we have to redirect the user always to page one as it could be that there is no page two
         // for filtered pieces
-        this.context.router.push({ pathname, query: { page: 1 } });
+        router.push({ pathname, query: { page: 1 } });
     },
 
     applyOrderBy(orderBy) {
@@ -361,4 +358,4 @@ let PieceList = React.createClass({
     }
 });
 
-export default PieceList;
+export default withRouter(PieceList);

js/components/register_piece.js

@@ -1,6 +1,5 @@
-'use strict';
-
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
@@ -18,8 +17,10 @@ import { getLangText } from '../utils/lang_utils';
 import { setDocumentTitle } from '../utils/dom_utils';
 
 
-let RegisterPiece = React.createClass( {
+const RegisterPiece = React.createClass( {
     propTypes: {
+        router: React.PropTypes.object.isRequired,
+
         headerMessage: React.PropTypes.string,
         submitMessage: React.PropTypes.string,
         children: React.PropTypes.oneOfType([
@@ -36,10 +37,6 @@ let RegisterPiece = React.createClass( {
         location: React.PropTypes.object
     },
 
-    contextTypes: {
-        router: React.PropTypes.object.isRequired
-    },
-
     getInitialState(){
         return PieceListStore.getState();
     },
@@ -66,7 +63,7 @@ let RegisterPiece = React.createClass( {
         // the piece list up to date
         PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
 
-        this.context.router.push(`/pieces/${response.piece.id}`);
+        this.props.router.push(`/pieces/${response.piece.id}`);
     },
 
     getSpecifyEditions() {
@@ -109,4 +106,4 @@ let RegisterPiece = React.createClass( {
 });
 
 
-export default RegisterPiece;
+export default withRouter(RegisterPiece);

js/components/signup_container.js

@@ -1,5 +1,3 @@
-'use strict';
-
 import React from 'react';
 import Link from 'react-router/es6/Link';
 

js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js

@@ -1,6 +1,5 @@
-'use strict';
-
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 
 import EditionListActions from '../../../../../../actions/edition_list_actions';
 
@@ -28,8 +27,10 @@ import { setDocumentTitle } from '../../../../../../utils/dom_utils';
 import { mergeOptions } from '../../../../../../utils/general_utils';
 
 
-let CylandPieceContainer = React.createClass({
+const CylandPieceContainer = React.createClass({
     propTypes: {
+        router: React.PropTypes.object.isRequired,
+
         // Provided from WalletApp
         currentUser: React.PropTypes.object.isRequired,
         whitelabel: React.PropTypes.object,
@@ -39,10 +40,6 @@ let CylandPieceContainer = React.createClass({
         params: React.PropTypes.object
     },
 
-    contextTypes: {
-        router: React.PropTypes.object
-    },
-
     getInitialState() {
         return mergeOptions(
             PieceStore.getInitialState(),
@@ -91,7 +88,7 @@ let CylandPieceContainer = React.createClass({
         const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.context.router.push('/collection');
+        this.props.router.push('/collection');
     },
 
     render() {
@@ -130,4 +127,4 @@ let CylandPieceContainer = React.createClass({
     }
 });
 
-export default CylandPieceContainer;
+export default withRouter(CylandPieceContainer);

js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js

@@ -1,6 +1,5 @@
-'use strict';
-
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 
 import Moment from 'moment';
 
@@ -33,8 +32,10 @@ import { mergeOptions } from '../../../../../utils/general_utils';
 import { getAclFormMessage } from '../../../../../utils/form_utils';
 
 
-let CylandRegisterPiece = React.createClass({
+const CylandRegisterPiece = React.createClass({
     propTypes: {
+        router: React.PropTypes.object.isRequired,
+
         // Provided from WalletApp
         currentUser: React.PropTypes.object.isRequired,
         whitelabel: React.PropTypes.object.isRequired,
@@ -43,10 +44,6 @@ let CylandRegisterPiece = React.createClass({
         location: React.PropTypes.object
     },
 
-    contextTypes: {
-        router: React.PropTypes.object.isRequired
-    },
-
     getInitialState(){
         return mergeOptions(
             PieceListStore.getState(),
@@ -111,7 +108,7 @@ let CylandRegisterPiece = React.createClass({
 
         this.refreshPieceList();
 
-        this.context.router.push(`/pieces/${this.state.piece.id}`);
+        this.props.router.push(`/pieces/${this.state.piece.id}`);
     },
 
     nextSlide(queryParams) {
@@ -221,4 +218,4 @@ let CylandRegisterPiece = React.createClass({
     }
 });
 
-export default CylandRegisterPiece;
+export default withRouter(CylandRegisterPiece);

js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js

@@ -1,6 +1,5 @@
-'use strict';
-
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import Button from 'react-bootstrap/lib/Button';
@@ -22,8 +21,10 @@ import { getLangText } from '../../../../../utils/lang_utils';
 import { setDocumentTitle } from '../../../../../utils/dom_utils';
 
 
-let IkonotvContractNotifications = React.createClass({
+const IkonotvContractNotifications = React.createClass({
     propTypes: {
+        router: React.PropTypes.object.isRequired,
+
         // Provided from WalletApp
         currentUser: React.PropTypes.object.isRequired,
         whitelabel: React.PropTypes.object.isRequired,
@@ -32,10 +33,6 @@ let IkonotvContractNotifications = React.createClass({
         location: React.PropTypes.object
     },
 
-    contextTypes: {
-        router: React.PropTypes.object.isRequired
-    },
-
     getInitialState() {
         return NotificationStore.getState();
     },
@@ -116,7 +113,7 @@ let IkonotvContractNotifications = React.createClass({
         NotificationActions.flushContractAgreementListNotifications();
         NotificationActions.fetchContractAgreementListNotifications();
 
-        this.context.router.push('/collection');
+        this.props.router.push('/collection');
     },
 
     handleDeny() {
@@ -130,7 +127,7 @@ let IkonotvContractNotifications = React.createClass({
         const notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.context.router.push('/collection');
+        this.props.router.push('/collection');
     },
 
     getCopyrightAssociationForm(){
@@ -201,4 +198,4 @@ let IkonotvContractNotifications = React.createClass({
     }
 });
 
-export default IkonotvContractNotifications;
+export default withRouter(IkonotvContractNotifications);

js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js

@@ -1,6 +1,5 @@
-'use strict';
-
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 
 import EditionListActions from '../../../../../../actions/edition_list_actions';
 
@@ -29,8 +28,10 @@ import { setDocumentTitle } from '../../../../../../utils/dom_utils';
 import { mergeOptions } from '../../../../../../utils/general_utils';
 
 
-let IkonotvPieceContainer = React.createClass({
+const IkonotvPieceContainer = React.createClass({
     propTypes: {
+        router: React.PropTypes.object.isRequired,
+
         // Provided from WalletApp
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object,
@@ -40,10 +41,6 @@ let IkonotvPieceContainer = React.createClass({
         params: React.PropTypes.object
     },
 
-    contextTypes: {
-        router: React.PropTypes.object.isRequired
-    },
-
     getInitialState() {
         return mergeOptions(
             PieceListStore.getState(),
@@ -92,7 +89,7 @@ let IkonotvPieceContainer = React.createClass({
         const notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.context.router.push('/collection');
+        this.props.router.push('/collection');
     },
 
     render() {
@@ -147,4 +144,4 @@ let IkonotvPieceContainer = React.createClass({
     }
 });
 
-export default IkonotvPieceContainer;
+export default withRouter(IkonotvPieceContainer);

js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js

@@ -1,6 +1,5 @@
-'use strict';
-
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 import Moment from 'moment';
 
 import Col from 'react-bootstrap/lib/Col';
@@ -29,8 +28,10 @@ import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';
 
 
-let IkonotvRegisterPiece = React.createClass({
+const IkonotvRegisterPiece = React.createClass({
     propTypes: {
+        router: React.PropTypes.object.isRequired,
+
         handleSuccess: React.PropTypes.func,
 
         // Provided from WalletApp
@@ -41,10 +42,6 @@ let IkonotvRegisterPiece = React.createClass({
         location: React.PropTypes.object
     },
 
-    contextTypes: {
-        router: React.PropTypes.object.isRequired
-    },
-
     getInitialState() {
         return mergeOptions(
             PieceListStore.getState(),
@@ -93,7 +90,7 @@ let IkonotvRegisterPiece = React.createClass({
         }
 
         if (!this.canSubmit()) {
-            this.context.router.push('/collection');
+            this.props.router.push('/collection');
         } else {
             this.nextSlide({ piece_id: response.piece.id });
         }
@@ -118,7 +115,7 @@ let IkonotvRegisterPiece = React.createClass({
 
         this.refreshPieceList();
 
-        this.context.router.push(`/pieces/${this.state.piece.id}`);
+        this.props.router.push(`/pieces/${this.state.piece.id}`);
     },
 
     nextSlide(queryParams) {
@@ -246,4 +243,4 @@ let IkonotvRegisterPiece = React.createClass({
     }
 });
 
-export default IkonotvRegisterPiece;
+export default withRouter(IkonotvRegisterPiece);

js/components/whitelabel/wallet/components/market/market_register_piece.js

@@ -1,6 +1,5 @@
-'use strict';
-
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
@@ -24,6 +23,8 @@ import { mergeOptions } from '../../../../../utils/general_utils';
 
 let MarketRegisterPiece = React.createClass({
     propTypes: {
+        router: React.PropTypes.object.isRequired,
+
         // Provided from WalletApp
         currentUser: React.PropTypes.object,
         whitelabel: React.PropTypes.object.isRequired,
@@ -32,10 +33,6 @@ let MarketRegisterPiece = React.createClass({
         location: React.PropTypes.object
     },
 
-    contextTypes: {
-        router: React.PropTypes.object.isRequired
-    },
-
     getInitialState(){
         return mergeOptions(
             PieceListStore.getState(),
@@ -83,7 +80,7 @@ let MarketRegisterPiece = React.createClass({
     handleAdditionalDataSuccess() {
         this.refreshPieceList();
 
-        this.context.router.push('/collection');
+        this.props.router.push('/collection');
     },
 
     nextSlide(queryParams) {
@@ -161,4 +158,4 @@ let MarketRegisterPiece = React.createClass({
     }
 });
 
-export default MarketRegisterPiece;
+export default withRouter(MarketRegisterPiece);

js/components/whitelabel/wallet/wallet_app.js

@@ -1,6 +1,5 @@
-'use strict';
-
 import React from 'react';
+import withRouter from 'react-router/es6/withRouter';
 import classNames from 'classnames';
 
 import AppBase from '../../app_base';
@@ -14,6 +13,7 @@ let WalletApp = React.createClass({
     propTypes: {
         activeRoute: React.PropTypes.object.isRequired,
         children: React.PropTypes.element.isRequired,
+        router: React.PropTypes.object.isRequired,
         routes: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
 
         // Provided from AppBase
@@ -21,13 +21,8 @@ let WalletApp = React.createClass({
         whitelabel: React.PropTypes.object
     },
 
-    contextTypes: {
-        router: React.PropTypes.object
-    },
-
     render() {
-        const { activeRoute, children, currentUser, routes, whitelabel } = this.props;
+        const { activeRoute, children, currentUser, router, routes, whitelabel } = this.props;
-        const { router } = this.context;
         const subdomain = getSubdomain();
         const path = activeRoute && activeRoute.path;
         const Footer = activeRoute && activeRoute.footer;
@@ -63,4 +58,4 @@ let WalletApp = React.createClass({
     }
 });
 
-export default AppBase(WalletApp);
+export default AppBase(withRouter(WalletApp));