Switch all usages of Router.Navigation and Router.State

js/components/ascribe_detail/edition.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import { Link } from 'react-router';
+import { Link, History } from 'react-router';
 
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
@@ -54,7 +54,7 @@ let Edition = React.createClass({
         loadEdition: React.PropTypes.func
     },
 
-    mixins: [Router.Navigation],
+    mixins: [History],
 
     getInitialState() {
         return mergeOptions(
@@ -96,7 +96,7 @@ let Edition = React.createClass({
         let notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.transitionTo('pieces');
+        this.history.pushState(null, '/pieces');
     },
 
     refreshCollection() {

js/components/ascribe_detail/piece_container.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import { History } from 'react-router';
 
 import PieceActions from '../../actions/piece_actions';
 import PieceStore from '../../stores/piece_store';
@@ -47,7 +47,7 @@ let PieceContainer = React.createClass({
         location: React.PropTypes.object
     },
 
-    mixins: [Router.Navigation],
+    mixins: [History],
 
     getInitialState() {
         return mergeOptions(
@@ -135,7 +135,7 @@ let PieceContainer = React.createClass({
         let notification = new GlobalNotificationModel(response.notification, 'success');
         GlobalNotificationActions.appendGlobalNotification(notification);
 
-        this.transitionTo('pieces');
+        this.history.pushState(null, '/pieces');
     },
 
     getCreateEditionsDialog() {

js/components/ascribe_forms/form_contract_agreement.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import { History } from 'react-router';
 
 import ContractListActions from '../../actions/contract_list_actions';
 import ContractListStore from '../../stores/contract_list_store';
@@ -25,7 +25,7 @@ let ContractAgreementForm = React.createClass({
         handleSuccess: React.PropTypes.func
     },
 
-    mixins: [Router.Navigation, Router.State],
+    mixins: [History],
 
     getInitialState() {
         return mergeOptions(
@@ -57,7 +57,8 @@ let ContractAgreementForm = React.createClass({
         let notification = 'Contract agreement send';
         notification = new GlobalNotificationModel(notification, 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
-        this.transitionTo('pieces');
+
+        this.history.pushState(null, '/pieces');
     },
 
     getFormData(){

js/components/ascribe_forms/form_login.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import { History } from 'react-router';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
@@ -24,10 +24,11 @@ let LoginForm = React.createClass({
         submitMessage: React.PropTypes.string,
         redirectOnLoggedIn: React.PropTypes.bool,
         redirectOnLoginSuccess: React.PropTypes.bool,
-        onLogin: React.PropTypes.func
+        onLogin: React.PropTypes.func,
+        location: React.PropTypes.object
     },
 
-    mixins: [Router.Navigation, Router.State],
+    mixins: [History],
 
     getDefaultProps() {
         return {
@@ -56,7 +57,7 @@ let LoginForm = React.createClass({
         // if user is already logged in, redirect him to piece list
         if(this.state.currentUser && this.state.currentUser.email && this.props.redirectOnLoggedIn) {
             // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.transitionTo('pieces'), 0);
+            window.setTimeout(() => this.history.pushState(null, '/pieces');, 0);
         }
     },
 
@@ -95,7 +96,7 @@ let LoginForm = React.createClass({
     },
 
     render() {
-        let email = this.getQuery().email || null;
+        let email = this.props.location.query.email || null;
         return (
             <Form
                 className="ascribe-form-bordered"

js/components/ascribe_forms/form_signup.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import { History } from 'react-router';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -18,15 +18,15 @@ import ApiUrls from '../../constants/api_urls';
 
 
 let SignupForm = React.createClass({
-
     propTypes: {
         headerMessage: React.PropTypes.string,
         submitMessage: React.PropTypes.string,
         handleSuccess: React.PropTypes.func,
-        children: React.PropTypes.element
+        children: React.PropTypes.element,
+        location: React.PropTypes.object
     },
 
-    mixins: [Router.Navigation, Router.State],
+    mixins: [History],
 
     getDefaultProps() {
         return {
@@ -51,7 +51,7 @@ let SignupForm = React.createClass({
 
         // if user is already logged in, redirect him to piece list
         if(this.state.currentUser && this.state.currentUser.email) {
-            this.transitionTo('pieces');
+            this.history.pushState(null, '/pieces');
         }
     },
 
@@ -62,13 +62,13 @@ let SignupForm = React.createClass({
             this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email + ', ' + getLangText('please confirm') + '.');
         }
         else if (response.redirect) {
-            this.transitionTo('pieces');
+            this.history.pushState(null, '/pieces');
         }
     },
 
     getFormData() {
-        if (this.getQuery().token){
+        if (this.props.location.query.token){
-            return {token: this.getQuery().token};
+            return {token: this.props.location.query.token};
         }
         return null;
     },
@@ -77,7 +77,7 @@ let SignupForm = React.createClass({
         let tooltipPassword = getLangText('Your password must be at least 10 characters') + '.\n ' +
             getLangText('This password is securing your digital property like a bank account') + '.\n ' +
             getLangText('Store it in a safe place') + '!';
-        let email = this.getQuery().email || null;
+        let email = this.props.location.query.email || null;
         return (
             <Form
                 className="ascribe-form-bordered"

js/components/ascribe_slides_container/slides_container.js

@@ -1,14 +1,11 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import { History } from 'react-router';
 import ReactAddons from 'react/addons';
 
 import SlidesContainerBreadcrumbs from './slides_container_breadcrumbs';
 
-let State = Router.State;
-let Navigation = Router.Navigation;
-
 
 let SlidesContainer = React.createClass({
     propTypes: {
@@ -18,14 +15,15 @@ let SlidesContainer = React.createClass({
         glyphiconClassNames: React.PropTypes.shape({
             pending: React.PropTypes.string,
             complete: React.PropTypes.string
-        })
+        }),
+        location: React.PropTypes.object
     },
 
-    mixins: [State, Navigation],
+    mixins: [History],
 
     getInitialState() {
         // handle queryParameters
-        let queryParams = this.getQuery();
+        let queryParams = this.props.location.query;
         let slideNum = -1;
         let startFrom = -1;
 
@@ -52,7 +50,7 @@ let SlidesContainer = React.createClass({
 
     componentDidMount() {
         // check if slide_num was defined, and if not then default to 0
-        let queryParams = this.getQuery();
+        let queryParams = this.props.location.query;
 
         // We use 'in' to check if the key is present in the user's browser url bar,
         // we do not really care about its value at this point
@@ -62,7 +60,7 @@ let SlidesContainer = React.createClass({
             // the specific one we need instead of overwriting them
             queryParams.slide_num = 0;
 
-            this.replaceWith(this.getPathname(), null, queryParams);
+            this.history.replaceState(null, this.props.location.pathname, queryParams);
         }
 
         // init container width
@@ -74,7 +72,7 @@ let SlidesContainer = React.createClass({
     },
 
     componentWillReceiveProps() {
-        let queryParams = this.getQuery();
+        let queryParams = this.props.location.query;
 
         // also check if start_from was updated
         // This applies for example when the user tries to submit a already existing piece
@@ -87,7 +85,7 @@ let SlidesContainer = React.createClass({
     },
 
     componentDidUpdate() {
-        let queryParams = this.getQuery();
+        let queryParams = this.props.location.query;
 
         // check if slide_num was defined, and if not then default to 0
         this.setSlideNum(queryParams.slide_num);
@@ -115,7 +113,7 @@ let SlidesContainer = React.createClass({
     setSlideNum(slideNum) {
 
         // we do not want to overwrite other queryParams
-        let queryParams = this.getQuery();
+        let queryParams = this.props.location.query;
 
         // slideNum can in some instances be not a number,
         // therefore we have to parse it to one and make sure that its not NaN
@@ -128,7 +126,7 @@ let SlidesContainer = React.createClass({
             slideNum = 0;
             queryParams.slide_num = slideNum;
 
-            this.replaceWith(this.getPathname(), null, queryParams);
+            this.history.replaceState(null, this.props.location.pathname, queryParams);
             this.setState({slideNum: slideNum});
             return;
 
@@ -152,11 +150,11 @@ let SlidesContainer = React.createClass({
                 
                 if(this.props.forwardProcess) {
                     queryParams.slide_num = slideNum;
-                    this.transitionTo(this.getPathname(), null, queryParams);
+                    this.history.pushState(null, this.props.location.pathname, queryParams);
                 } else {
                     if(this.state.historyLength === window.history.length) {
                         queryParams.slide_num = slideNum;
-                        this.transitionTo(this.getPathname(), null, queryParams);
+                        this.history.pushState(null, this.props.location.pathname, queryParams);
                     } else {
                         window.history.forward();
                     }

js/components/ascribe_table/table_item_wrapper.js

@@ -33,11 +33,6 @@ let TableItemWrapper = React.createClass({
                     } else {
 
                         let linkString = column.transition.toReactRouterLink(this.props.columnContent[column.transition.valueKey]);
-                        /**
-                         * If a transition is defined in columnContent, then we can use
-                         * Router.Navigation.transitionTo to redirect the user
-                         * programmatically
-                         */
                         return (
                             <td key={i} className={column.className}>
                                 <Link

js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js

@@ -23,10 +23,8 @@ let FileDragAndDropDialog = React.createClass({
         location: React.PropTypes.object
     },
 
-    mixins: [Router.State],
-
     render() {
-        const queryParams = this.getQuery();
+        const queryParams = this.props.location.query;
 
         if(this.props.hasFiles) {
             return null;

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -2,7 +2,6 @@
 
 import React from 'react/addons';
 import fineUploader from 'fineUploader';
-import Router from 'react-router';
 import Q from 'q';
 
 import S3Fetcher from '../../fetchers/s3_fetcher';
@@ -132,8 +131,6 @@ let ReactS3FineUploader = React.createClass({
         location: React.PropTypes.object
     },
 
-    mixins: [Router.State],
-
     getDefaultProps() {
         return {
             autoUpload: true,
@@ -651,7 +648,7 @@ let ReactS3FineUploader = React.createClass({
         //
         // In the view this only happens when the user is allowed to do local hashing as well
         // as when the correct query parameter is present in the url ('hash' and not 'upload')
-        let queryParams = this.getQuery();
+        let queryParams = this.props.location.query;
         if(this.props.enableLocalHashing && queryParams && queryParams.method === 'hash') {
 
             let convertedFilePromises = [];
@@ -832,7 +829,7 @@ let ReactS3FineUploader = React.createClass({
 
     isDropzoneInactive() {
         let filesToDisplay = this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1);
-        let queryParams = this.getQuery();
+        let queryParams = this.props.location.query;
 
         if((this.props.enableLocalHashing && !queryParams.method) || !this.props.areAssetsEditable || !this.props.multiple && filesToDisplay.length > 0) {
             return true;

js/components/header.js

@@ -1,7 +1,6 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
 
 import Nav from 'react-bootstrap/lib/Nav';
 import Navbar from 'react-bootstrap/lib/Navbar';
@@ -36,8 +35,6 @@ let Header = React.createClass({
         routes: React.PropTypes.element
     },
 
-    mixins: [Router.State],
-
     getDefaultProps() {
         return {
             showAddWork: true

js/components/login_container.js

@@ -13,7 +13,8 @@ let LoginContainer = React.createClass({
         message: React.PropTypes.string,
         redirectOnLoggedIn: React.PropTypes.bool,
         redirectOnLoginSuccess: React.PropTypes.bool,
-        onLogin: React.PropTypes.func
+        onLogin: React.PropTypes.func,
+        location: React.PropTypes.object
     },
 
     getDefaultProps() {
@@ -31,7 +32,8 @@ let LoginContainer = React.createClass({
                     redirectOnLoggedIn={this.props.redirectOnLoggedIn}
                     redirectOnLoginSuccess={this.props.redirectOnLoginSuccess}
                     message={this.props.message}
-                    onLogin={this.props.onLogin}/>
+                    onLogin={this.props.onLogin}
+                    location={this.props.location}/>
                 <div className="ascribe-login-text">
                     {getLangText('Not an ascribe user')}&#63; <Link to="/signup">{getLangText('Sign up')}...</Link><br/>
                     {getLangText('Forgot my password')}&#63; <Link to="/password_reset">{getLangText('Rescue me')}...</Link>

js/components/logout_container.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import { History } from 'react-router';
 
 import UserActions from '../actions/user_actions';
 import Alt from '../alt';
@@ -11,7 +11,7 @@ let baseUrl = AppConstants.baseUrl;
 
 let LogoutContainer = React.createClass({
 
-    mixins: [Router.Navigation, Router.State],
+    mixins: [History],
 
     componentDidMount() {
         UserActions.logoutCurrentUser()
@@ -19,7 +19,7 @@ let LogoutContainer = React.createClass({
                 Alt.flush();
                 // kill intercom (with fire)
                 window.Intercom('shutdown');
-                this.replaceWith(baseUrl);
+                this.history.replaceState(null, baseUrl);
             })
             .catch((err) => {
                 console.logGlobal(err);

js/components/password_reset_container.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import { History } from 'react-router';
 
 import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
@@ -13,8 +13,6 @@ import { getLangText } from '../utils/lang_utils';
 
 
 let PasswordResetContainer = React.createClass({
-    mixins: [Router.Navigation],
-
     getInitialState() {
         return {isRequested: false};
     },
@@ -112,7 +110,7 @@ let PasswordResetForm = React.createClass({
         token: React.PropTypes.string
     },
 
-    mixins: [Router.Navigation],
+    mixins: [History],
 
     getFormData() {
         return {
@@ -122,7 +120,7 @@ let PasswordResetForm = React.createClass({
     },
 
     handleSuccess() {
-        this.transitionTo('pieces');
+        this.history.pushState(null, '/pieces');
         let notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
         GlobalNotificationActions.appendGlobalNotification(notification);
     },

js/components/piece_list.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import { History } from 'react-router';
 
 import PieceListStore from '../stores/piece_list_store';
 import PieceListActions from '../actions/piece_list_actions';
@@ -33,10 +33,11 @@ let PieceList = React.createClass({
         customSubmitButton: React.PropTypes.element,
         filterParams: React.PropTypes.array,
         orderParams: React.PropTypes.array,
-        orderBy: React.PropTypes.string
+        orderBy: React.PropTypes.string,
+        location: React.PropTypes.object
     },
 
-    mixins: [Router.Navigation, Router.State],
+    mixins: [History],
 
     getDefaultProps() {
         return {
@@ -60,7 +61,7 @@ let PieceList = React.createClass({
     },
 
     componentDidMount() {
-        let page = this.getQuery().page || 1;
+        let page = this.props.location.query.page || 1;
         
         PieceListStore.listen(this.onChange);
         EditionListStore.listen(this.onChange);
@@ -75,7 +76,7 @@ let PieceList = React.createClass({
     componentDidUpdate() {
         if (this.props.redirectTo && this.state.unfilteredPieceListCount === 0) {
             // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.transitionTo(this.props.redirectTo, this.getQuery()));
+            window.setTimeout(() => this.history.pushState(null, this.props.redirectTo, this.props.location.query);
         }
     },
 
@@ -100,7 +101,7 @@ let PieceList = React.createClass({
     },
 
     getPagination() {
-        let currentPage = parseInt(this.getQuery().page, 10) || 1;
+        let currentPage = parseInt(this.props.location.query.page, 10) || 1;
         let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
 
         if (this.state.pieceListCount > 10) {
@@ -116,7 +117,7 @@ let PieceList = React.createClass({
     searchFor(searchTerm) {
          PieceListActions.fetchPieceList(1, this.state.pageSize, searchTerm, this.state.orderBy,
                                         this.state.orderAsc, this.state.filterBy);
-         this.transitionTo(this.getPathname(), {page: 1});
+         this.history.pushState(null, this.props.location.pathname, {page: 1});
     },
 
     applyFilterBy(filterBy){
@@ -140,7 +141,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.transitionTo(this.getPathname(), {page: 1});
+        this.history.pushState(null, this.props.location.pathname, {page: 1});
     },
 
     applyOrderBy(orderBy) {

js/components/register_piece.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import { History } from 'react-router';
 
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
@@ -41,7 +41,7 @@ let RegisterPiece = React.createClass( {
         location: React.PropTypes.object
     },
 
-    mixins: [Router.Navigation],
+    mixins: [History],
 
     getDefaultProps() {
         return {
@@ -99,7 +99,7 @@ let RegisterPiece = React.createClass( {
             this.state.filterBy
         );
 
-        this.transitionTo('piece', {pieceId: response.piece.id});
+        this.history.pushState(null, `/pieces/${response.piece.id}`);
     },
 
     getSpecifyEditions() {
@@ -140,7 +140,8 @@ let RegisterPiece = React.createClass( {
         return (
             <SlidesContainer
                 ref="slidesContainer"
-                forwardProcess={false}>
+                forwardProcess={false}
+                location={this.props.location}>
                 <div
                     onClick={this.onLoggedOut}
                     onFocus={this.onLoggedOut}>

js/components/signup_container.js

@@ -9,6 +9,10 @@ import { getLangText } from '../utils/lang_utils';
 
 
 let SignupContainer = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
     getInitialState() {
         return {
             submitted: false,
@@ -36,7 +40,9 @@ let SignupContainer = React.createClass({
         }
         return (
             <div className="ascribe-login-wrapper">
-                <SignupForm handleSuccess={this.handleSuccess} />
+                <SignupForm
+                    handleSuccess={this.handleSuccess}
+                    location={this.props.location}/>
                 <div className="ascribe-login-text">
                     {getLangText('Already an ascribe user')}&#63; <Link to="/login">{getLangText('Log in')}...</Link><br/>
                 </div>

js/components/whitelabel/prize/components/prize_landing.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import { History } from 'react-router';
 
 import PrizeActions from '../actions/prize_actions';
 import PrizeStore from '../stores/prize_store';
@@ -17,7 +17,7 @@ import { getLangText } from '../../../../utils/lang_utils';
 
 let Landing = React.createClass({
 
-    mixins: [Router.Navigation],
+    mixins: [History],
 
     getInitialState() {
         return mergeOptions(
@@ -44,7 +44,7 @@ let Landing = React.createClass({
         // if user is already logged in, redirect him to piece list
         if(this.state.currentUser && this.state.currentUser.email) {
             // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.replaceWith('pieces'), 0);
+            window.setTimeout(() => this.history.replaceState(null, '/pieces'), 0);
         }
     },
 

js/components/whitelabel/prize/components/prize_login_container.js

@@ -9,11 +9,16 @@ import { getLangText } from '../../../../utils/lang_utils';
 
 
 let LoginContainer = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
     render() {
         return (
             <div className="ascribe-login-wrapper">
                 <LoginForm
-                    headerMessage={getLangText('Log in with ascribe')} />
+                    headerMessage={getLangText('Log in with ascribe')}
+                    location={this.props.location}/>
                 <div
                     className="ascribe-login-text">
                     {getLangText('I\'m not a user') + ' '}

js/components/whitelabel/prize/components/prize_piece_list.js

@@ -16,6 +16,10 @@ import { mergeOptions } from '../../../../utils/general_utils';
 import { getLangText } from '../../../../utils/lang_utils';
 
 let PrizePieceList = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
     getInitialState() {
         return mergeOptions(
             PrizeStore.getState(),
@@ -65,12 +69,13 @@ let PrizePieceList = React.createClass({
             <div>
                 <PieceList
                     ref="list"
-                    redirectTo="register_piece"
+                    redirectTo="/register_piece"
                     accordionListItemType={AccordionListItemPrize}
                     orderParams={orderParams}
                     orderBy={this.state.currentUser.is_jury ? 'rating' : null}
                     filterParams={[]}
-                    customSubmitButton={this.getButtonSubmit()}/>
+                    customSubmitButton={this.getButtonSubmit()}
+                    location={this.props.location}/>
             </div>
         );
     }

js/components/whitelabel/prize/components/prize_signup_container.js

@@ -6,6 +6,10 @@ import SignupForm from '../../../ascribe_forms/form_signup';
 import { getLangText } from '../../../../utils/lang_utils';
 
 let SignupContainer = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
     getInitialState() {
         return {
             submitted: false,
@@ -35,7 +39,8 @@ let SignupContainer = React.createClass({
                     <SignupForm
                         headerMessage={getLangText('Create account for submission')}
                         submitMessage={getLangText('Sign up')}
-                        handleSuccess={this.handleSuccess} />
+                        handleSuccess={this.handleSuccess}
+                        location={this.props.location}/>
                 </div>
             );
         }

js/components/whitelabel/prize/prize_app.js

@@ -1,7 +1,6 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
 import Hero from './components/prize_hero';
 import Header from '../../header';
 import Footer from '../../footer';
@@ -12,10 +11,14 @@ import getRoutes from './prize_routes';
 import { getSubdomain } from '../../../utils/general_utils';
 
 
-let RouteHandler = Router.RouteHandler;
-
 let PrizeApp = React.createClass({
-    mixins: [Router.State],
+    propTypes: {
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ]),
+        history: React.PropTypes.object
+    },
 
     render() {
         let header = null;
@@ -23,7 +26,7 @@ let PrizeApp = React.createClass({
 
         let ROUTES = getRoutes(null, subdomain);
 
-        if (this.isActive('landing') || this.isActive('login') || this.isActive('signup')) {
+        if (this.props.history.isActive('/') || this.props.history.isActive('/login') || this.props.history.isActive('/signup')) {
             header = <Hero />;
         } else {
             header = <Header showAddWork={false} routes={ROUTES}/>;
@@ -32,7 +35,7 @@ let PrizeApp = React.createClass({
         return (
             <div className={'container ascribe-prize-app client--' + subdomain}>
                 {header}
-                <RouteHandler />
+                {this.props.children}
                 <GlobalNotification />
                 <div id="modal" className="container"></div>
                 <Footer />

js/components/whitelabel/wallet/components/cyland/cyland_landing.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import { History } from 'react-router';
 
 
 import WhitelabelActions from '../../../../../actions/whitelabel_actions';
@@ -17,7 +17,7 @@ import { getLangText } from '../../../../../utils/lang_utils';
 
 let CylandLanding = React.createClass({
 
-    mixins: [Router.Navigation],
+    mixins: [History],
 
     getInitialState() {
         return mergeOptions(
@@ -44,7 +44,7 @@ let CylandLanding = React.createClass({
         // if user is already logged in, redirect him to piece list
         if(this.state.currentUser && this.state.currentUser.email) {
             // FIXME: hack to redirect out of the dispatch cycle
-            window.setTimeout(() => this.replaceWith('pieces'), 0);
+            window.setTimeout(() => this.history.replaceState(null, '/pieces'), 0);
         }
     },
 

js/components/whitelabel/wallet/components/cyland/cyland_piece_list.js

@@ -12,6 +12,10 @@ import { getLangText } from '../../../../../utils/lang_utils';
 
 
 let CylandPieceList = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
     getInitialState() {
         return UserStore.getState();
     },
@@ -33,7 +37,7 @@ let CylandPieceList = React.createClass({
         return (
             <div>
                 <PieceList
-                    redirectTo="register_piece"
+                    redirectTo="/register_piece"
                     accordionListItemType={CylandAccordionListItem}
                     filterParams={[{
                         label: getLangText('Show works I have'),
@@ -42,7 +46,7 @@ let CylandPieceList = React.createClass({
                             label: getLangText('loaned to Cyland')
                         }]
                     }]}
-                    />
+                    location={this.props.location}/>
             </div>
         );
     }

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

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import { History } from 'react-router';
 
 import Moment from 'moment';
 
@@ -43,7 +43,7 @@ let CylandRegisterPiece = React.createClass({
         location: React.PropTypes.object
     },
 
-    mixins: [Router.Navigation, Router.State],
+    mixins: [History],
 
     getInitialState(){
         return mergeOptions(
@@ -66,7 +66,7 @@ let CylandRegisterPiece = React.createClass({
         UserActions.fetchCurrentUser();
         WhitelabelActions.fetchWhitelabel();
 
-        let queryParams = this.getQuery();
+        let queryParams = this.props.location.query;
 
         // Since every step of this register process is atomic,
         // we may need to enter the process at step 1 or 2.
@@ -133,7 +133,8 @@ let CylandRegisterPiece = React.createClass({
         this.refreshPieceList();
 
         PieceActions.fetchOne(this.state.piece.id);
-        this.transitionTo('piece', {pieceId: this.state.piece.id});
+
+        this.history.pushState(null, `/pieces/${this.state.piece.id}`);
     },
 
     // We need to increase the step to lock the forms that are already filled out
@@ -166,7 +167,7 @@ let CylandRegisterPiece = React.createClass({
 
     // basically redirects to the second slide (index: 1), when the user is not logged in
     onLoggedOut() {
-        this.transitionTo('login');
+        this.history.pushState(null, '/login');
     },
 
     render() {
@@ -182,7 +183,8 @@ let CylandRegisterPiece = React.createClass({
                 glyphiconClassNames={{
                     pending: 'glyphicon glyphicon-chevron-right',
                     completed: 'glyphicon glyphicon-lock'
-                }}>
+                }}
+                location={this.props.location}>
                 <div data-slide-title={getLangText('Register work')}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>

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

@@ -1,7 +1,7 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
+import { History } from 'react-router';
 
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import Button from 'react-bootstrap/lib/Button';
@@ -29,11 +29,10 @@ import AppConstants from '../../../../../constants/application_constants';
 import { getLangText } from '../../../../../utils/lang_utils';
 import { mergeOptions } from '../../../../../utils/general_utils';
 
-let Navigation = Router.Navigation;
 
 let IkonotvContractNotifications = React.createClass({
 
-    mixins: [Navigation],
+    mixins: [History],
 
     getInitialState() {
         return mergeOptions(
@@ -114,7 +113,7 @@ let IkonotvContractNotifications = React.createClass({
     handleConfirmSuccess() {
         let notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
-        this.transitionTo('pieces');
+        this.history.pushState(null, '/pieces');
     },
 
     handleDeny() {
@@ -127,7 +126,7 @@ let IkonotvContractNotifications = React.createClass({
     handleDenySuccess() {
         let notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
-        this.transitionTo('pieces');
+        this.history.pushState(null, '/pieces');
     },
 
     getCopyrightAssociationForm(){

js/components/whitelabel/wallet/components/ikonotv/ikonotv_landing.js

@@ -1,7 +1,6 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
 
 import ButtonLink from 'react-router-bootstrap/lib/ButtonLink';
 
@@ -12,8 +11,9 @@ import { getLangText } from '../../../../../utils/lang_utils';
 
 
 let IkonotvLanding = React.createClass({
-
+    propTypes: {
-    mixins: [Router.Navigation, Router.State],
+        location: React.PropTypes.object
+    },
 
     getInitialState() {
         return UserStore.getState();
@@ -38,11 +38,11 @@ let IkonotvLanding = React.createClass({
         if(this.state.currentUser && this.state.currentUser.email) {
             redirect = 'pieces';
         }
-        else if (this.getQuery() && this.getQuery().redirect) {
+        else if (this.props.location.query && this.props.location.query.redirect) {
-            redirect = this.getQuery().redirect;
+            redirect = this.props.location.query.redirect;
         }
         return (
-            <ButtonLink to={redirect} query={this.getQuery()}>
+            <ButtonLink to={redirect} query={this.props.location.query}>
                 {getLangText('ENTER TO START')}
             </ButtonLink>
         );

js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js

@@ -12,6 +12,10 @@ import { getLangText } from '../../../../../utils/lang_utils';
 
 
 let IkonotvPieceList = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
     getInitialState() {
         return UserStore.getState();
     },
@@ -33,7 +37,7 @@ let IkonotvPieceList = React.createClass({
         return (
             <div>
                 <PieceList
-                    redirectTo="register_piece"
+                    redirectTo="/register_piece"
                     accordionListItemType={IkonotvAccordionListItem}
                     filterParams={[{
                         label: getLangText('Show works I have'),
@@ -47,7 +51,8 @@ let IkonotvPieceList = React.createClass({
                                 label: getLangText('loaned')
                             }
                         ]
-                        }]}/>
+                    }]}
+                    location={this.props.location}/>
             </div>
         );
     }

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

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import Moment from 'moment';
-import Router from 'react-router';
+import { History } from 'react-router';
 
 import Col from 'react-bootstrap/lib/Col';
 import Row from 'react-bootstrap/lib/Row';
@@ -39,7 +39,7 @@ let IkonotvRegisterPiece = React.createClass({
         location: React.PropTypes.object
     },
 
-    mixins: [Router.Navigation, Router.State],
+    mixins: [History],
 
     getInitialState(){
         return mergeOptions(
@@ -61,7 +61,7 @@ let IkonotvRegisterPiece = React.createClass({
         // not want to display to the user.
         PieceActions.updatePiece({});
 
-        let queryParams = this.getQuery();
+        let queryParams = this.props.location.query;
 
         // Since every step of this register process is atomic,
         // we may need to enter the process at step 1 or 2.
@@ -102,7 +102,7 @@ let IkonotvRegisterPiece = React.createClass({
             PieceActions.updatePiece(response.piece);
         }
         if (!this.canSubmit()) {
-            this.transitionTo('pieces');
+            this.history.pushState(null, '/pieces');
         }
         else {
             this.incrementStep();
@@ -132,7 +132,7 @@ let IkonotvRegisterPiece = React.createClass({
         this.refreshPieceList();
 
         PieceActions.fetchOne(this.state.piece.id);
-        this.transitionTo('piece', {pieceId: this.state.piece.id});
+        this.history.pushState(null, `/pieces/${this.state.piece.id}`);
     },
 
     // We need to increase the step to lock the forms that are already filled out
@@ -165,7 +165,7 @@ let IkonotvRegisterPiece = React.createClass({
 
     // basically redirects to the second slide (index: 1), when the user is not logged in
     onLoggedOut() {
-        this.transitionTo('login');
+        this.history.pushState(null, '/login');
     },
 
     canSubmit() {
@@ -245,7 +245,8 @@ let IkonotvRegisterPiece = React.createClass({
                 glyphiconClassNames={{
                     pending: 'glyphicon glyphicon-chevron-right',
                     completed: 'glyphicon glyphicon-lock'
-                    }}>
+                }}
+                location={this.props.location}>
                 <div data-slide-title={getLangText('Register work')}>
                     <Row className="no-margin">
                         <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>

js/components/whitelabel/wallet/wallet_app.js

@@ -1,7 +1,6 @@
 'use strict';
 
 import React from 'react';
-import Router from 'react-router';
 import Header from '../../header';
 import Footer from '../../footer';
 
@@ -13,22 +12,28 @@ import classNames from 'classnames';
 import { getSubdomain } from '../../../utils/general_utils';
 
 
-let RouteHandler = Router.RouteHandler;
-
-
 let WalletApp = React.createClass({
-    mixins: [Router.State],
+    propTypes: {
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ]),
+        history: React.PropTypes.object,
+        routes: React.PropTypes.arrayOf(React.PropTypes.object)
+    },
 
     render() {
         let subdomain = getSubdomain();
         let ROUTES = getRoutes(null, subdomain);
-        let activeRoutes = this.getRoutes().map(elem => 'route--' + elem.name);
+
+        // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,
+        // we split the path by the first occurring slash and take the first splitter.
+        let activeRoutes = this.props.routes.map(elem => 'route--' + elem.path.split('/')[0]);
 
         let header = null;
-        if ((this.isActive('landing') || this.isActive('login') || this.isActive('signup') || this.isActive('contract_notifications'))
+        if ((this.isActive('/') || this.isActive('/login') || this.isActive('/signup') || this.isActive('/contract_notifications'))
             && (['ikonotv', 'cyland']).indexOf(subdomain) > -1) {
-            header = (
+            header = (<div className="hero"/>);
-                <div className="hero"/>);
         } else {
             header = <Header showAddWork={true} routes={ROUTES} />;
         }
@@ -37,7 +42,7 @@ let WalletApp = React.createClass({
             <div className={classNames('ascribe-wallet-app', activeRoutes)}>
                 <div className='container'>
                     {header}
-                    <RouteHandler />
+                    {this.props.children}
                     <GlobalNotification />
                     <div id="modal" className="container"></div>
                     <Footer />