Change links in app to new react-router@1.0rc1 syntax

2024-06-23 01:36:28 +02:00 · 2015-09-30 18:30:50 +02:00 · 2015-09-30 18:30:50 +02:00 · 8cd4377a58
commit 8cd4377a58
parent eebe936023
28 changed files with 132 additions and 128 deletions
--- a/js/components/ascribe_accordion_list/accordion_list_item_piece.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_piece.js
@ -1,14 +1,12 @@
 'use strict';

 import React from 'react';
-import Router from 'react-router';
+import { Link } from 'react-router';

 import AccordionListItem from './accordion_list_item';

 import { getLangText } from '../../utils/lang_utils';

-let Link = Router.Link;
-

 let AccordionListItemPiece = React.createClass({
    propTypes: {
@ -24,26 +22,15 @@ let AccordionListItemPiece = React.createClass({
        badge: React.PropTypes.object
    },

-    mixins: [Router.Navigation],
-
    getLinkData() {
+        let { piece } = this.props;
+
+        if(piece && piece.first_edition) {
+            return `/editions/${piece.first_edition.bitcoin_id}`;

-        if(this.props.piece && this.props.piece.first_edition) {
-            return {
-                to: 'edition',
-                params: {
-                    editionId: this.props.piece.first_edition.bitcoin_id
-                }
-            };
        } else {
-            return {
-                to: 'piece',
-                params: {
-                    pieceId: this.props.piece.id
-                }
-            };
+            return `/pieces/${piece.id}`;
        }
-        
    },

    render() {
@ -51,11 +38,11 @@ let AccordionListItemPiece = React.createClass({
            <AccordionListItem
                className={this.props.className}
                thumbnail={
-                    <Link {...this.getLinkData()}>
+                    <Link to={this.getLinkData()}>
                        <img src={this.props.piece.thumbnail.url_safe}/>
                    </Link>}
                heading={
-                    <Link {...this.getLinkData()}>
+                    <Link to={this.getLinkData()}>
                        <h1>{this.props.piece.title}</h1>
                    </Link>}
                subheading={
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@ -1,7 +1,7 @@
 'use strict';

 import React from 'react';
-import Router from 'react-router';
+import { Link } from 'react-router';

 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
@ -44,7 +44,7 @@ import AppConstants from '../../constants/application_constants';
 import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';

-let Link = Router.Link;
+
 /**
 * This is the component that implements display-specific functionality
 */
@ -364,7 +364,7 @@ let CoaDetails = React.createClass({
                                {getLangText('Download')} <Glyphicon glyph="cloud-download"/>
                            </button>
                        </a>
-                        <Link to="coa_verify">
+                        <Link to="/coa_verify">
                            <button className="btn btn-default btn-xs">
                                {getLangText('Verify')} <Glyphicon glyph="check"/>
                            </button>
--- a/js/components/ascribe_detail/further_details.js
+++ b/js/components/ascribe_detail/further_details.js
@ -23,7 +23,8 @@ let FurtherDetails = React.createClass({
        pieceId: React.PropTypes.number,
        extraData: React.PropTypes.object,
        otherData: React.PropTypes.arrayOf(React.PropTypes.object),
-        handleSuccess: React.PropTypes.func
+        handleSuccess: React.PropTypes.func,
+        location: React.PropTypes.object
    },

    getInitialState() {
@ -85,7 +86,8 @@ let FurtherDetails = React.createClass({
                            overrideForm={true}
                            pieceId={this.props.pieceId}
                            otherData={this.props.otherData}
-                            multiple={true}/>
+                            multiple={true}
+                            location={this.props.location}/>
                    </Form>
                </Col>
            </Row>
--- a/js/components/ascribe_detail/further_details_fileuploader.js
+++ b/js/components/ascribe_detail/further_details_fileuploader.js
@ -20,7 +20,8 @@ let FurtherDetailsFileuploader = React.createClass({
        submitFile: React.PropTypes.func,
        isReadyForFormSubmission: React.PropTypes.func,
        editable: React.PropTypes.bool,
-        multiple: React.PropTypes.bool
+        multiple: React.PropTypes.bool,
+        location: React.PropTypes.object
    },

    getDefaultProps() {
@ -88,7 +89,8 @@ let FurtherDetailsFileuploader = React.createClass({
                    }}
                    areAssetsDownloadable={true}
                    areAssetsEditable={this.props.editable}
-                    multiple={this.props.multiple}/>
+                    multiple={this.props.multiple}
+                    location={this.props.location}/>
            </Property>
        );
    }
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@ -43,6 +43,9 @@ import { getLangText } from '../../utils/lang_utils';
 * This is the component that implements resource/data specific functionality
 */
 let PieceContainer = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },

    mixins: [Router.Navigation],

@ -261,7 +264,8 @@ let PieceContainer = React.createClass({
                            pieceId={this.state.piece.id}
                            extraData={this.state.piece.extra_data}
                            otherData={this.state.piece.other_data}
-                            handleSuccess={this.loadPiece}/>
+                            handleSuccess={this.loadPiece}
+                            location={this.props.location}/>
                    </CollapsibleParagraph>

                </Piece>
--- a/js/components/ascribe_forms/form_create_contract.js
+++ b/js/components/ascribe_forms/form_create_contract.js
@ -28,7 +28,8 @@ let CreateContractForm = React.createClass({
        fileClassToUpload: React.PropTypes.shape({
            singular: React.PropTypes.string,
            plural: React.PropTypes.string
-        })
+        }),
+        location: React.PropTypes.object
    },

    getInitialState() {
@ -86,7 +87,8 @@ let CreateContractForm = React.createClass({
                        areAssetsEditable={true}
                        setIsUploadReady={this.setIsUploadReady}
                        isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
-                        fileClassToUpload={this.props.fileClassToUpload}/>
+                        fileClassToUpload={this.props.fileClassToUpload}
+                        location={this.props.location}/>
                </Property>
                <Property
                    name='name'
--- a/js/components/ascribe_forms/form_register_piece.js
+++ b/js/components/ascribe_forms/form_register_piece.js
@ -29,7 +29,8 @@ let RegisterPieceForm = React.createClass({
        onLoggedOut: React.PropTypes.func,

        // For this form to work with SlideContainer, we sometimes have to disable it
-        disabled: React.PropTypes.bool
+        disabled: React.PropTypes.bool,
+        location: React.PropTypes.object
    },

    getDefaultProps() {
@ -113,7 +114,8 @@ let RegisterPieceForm = React.createClass({
                        isFineUploaderActive={this.props.isFineUploaderActive}
                        onLoggedOut={this.props.onLoggedOut}
                        disabled={!this.props.isFineUploaderEditable}
-                        enableLocalHashing={enableLocalHashing}/>
+                        enableLocalHashing={enableLocalHashing}
+                        location={this.props.location}/>
                </Property>
                <Property
                    name='artist_name'
--- a/js/components/ascribe_forms/input_fineuploader.js
+++ b/js/components/ascribe_forms/input_fineuploader.js
@ -46,7 +46,8 @@ let InputFineUploader = React.createClass({
        fileClassToUpload: React.PropTypes.shape({
            singular: React.PropTypes.string,
            plural: React.PropTypes.string
-        })
+        }),
+        location: React.PropTypes.object
    },

    getInitialState() {
@ -106,7 +107,8 @@ let InputFineUploader = React.createClass({
                }}
                onInactive={this.props.onLoggedOut}
                enableLocalHashing={this.props.enableLocalHashing}
-                fileClassToUpload={this.props.fileClassToUpload}/>
+                fileClassToUpload={this.props.fileClassToUpload}
+                location={this.props.location}/>
        );
    }
 });
--- a/js/components/ascribe_pagination/pagination_button.js
+++ b/js/components/ascribe_pagination/pagination_button.js
@ -1,11 +1,10 @@
 'use strict';

 import React from 'react';
-import Router from 'react-router';
+import { Link } from 'react-router';

 import { getLangText } from '../../utils/lang_utils';

-let Link = Router.Link;

 let PaginationButton = React.createClass({
    propTypes: {
@ -43,7 +42,7 @@ let PaginationButton = React.createClass({

        if (this.isInRange(page)) {
            anchor = (
-                <Link to="pieces"
+                <Link to="/pieces"
                      query={{page}}
                      onClick={this.props.goToPage(page)}>
                    {directionDisplay}
--- a/js/components/ascribe_settings/contract_settings.js
+++ b/js/components/ascribe_settings/contract_settings.js
@ -27,6 +27,10 @@ import { mergeOptions, truncateTextAtCharIndex } from '../../utils/general_utils


 let ContractSettings = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
    getInitialState(){
        return mergeOptions(
            ContractListStore.getState(),
@ -89,7 +93,8 @@ let ContractSettings = React.createClass({
                    fileClassToUpload={{
                        singular: 'new contract',
                        plural: 'new contracts'
-                    }}/>
+                    }}
+                    location={this.props.location}/>
            );
        }

@ -114,7 +119,9 @@ let ContractSettings = React.createClass({
                                                <AclProxy
                                                    aclObject={this.state.whitelabel}
                                                    aclName="acl_update_public_contract">
-                                                    <ContractSettingsUpdateButton contract={contract}/>
+                                                    <ContractSettingsUpdateButton
+                                                        contract={contract}
+                                                        location={this.props.location}/>
                                                </AclProxy>
                                                <a
                                                    className="btn btn-default btn-sm margin-left-2px"
@ -156,7 +163,9 @@ let ContractSettings = React.createClass({
                                               <AclProxy
                                                    aclObject={this.state.whitelabel}
                                                    aclName="acl_update_private_contract">
-                                                    <ContractSettingsUpdateButton contract={contract}/>
+                                                    <ContractSettingsUpdateButton
+                                                        contract={contract}
+                                                        location={this.props.location}/>
                                                </AclProxy>
                                                <a
                                                    className="btn btn-default btn-sm margin-left-2px"
--- a/js/components/ascribe_settings/contract_settings_update_button.js
+++ b/js/components/ascribe_settings/contract_settings_update_button.js
@ -20,7 +20,8 @@ import { getLangText } from '../../utils/lang_utils';

 let ContractSettingsUpdateButton = React.createClass({
    propTypes: {
-        contract: React.PropTypes.object
+        contract: React.PropTypes.object,
+        location: React.PropTypes.object
    },

    submitFile(file) {
@ -90,7 +91,7 @@ let ContractSettingsUpdateButton = React.createClass({
                }}
                isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                submitFile={this.submitFile}
-            />
+                location={this.props.location}/>
        );
    }
 });
--- a/js/components/ascribe_table/models/table_models.js
+++ b/js/components/ascribe_table/models/table_models.js
@ -35,14 +35,7 @@ export class TransitionModel {
        this.callback = callback;
    }

-    toReactRouterLinkProps(queryValue) {
-        let props = {
-            to: this.to,
-            params: {}
-        };
-
-        props.params[this.queryKey] = queryValue;
-
-        return props;
+    toReactRouterLink(queryValue) {
+        return '/' + this.to + '/' + queryValue;
    }
 }
--- a/js/components/ascribe_table/table_item_wrapper.js
+++ b/js/components/ascribe_table/table_item_wrapper.js
@ -1,11 +1,10 @@
 'use strict';

 import React from 'react';
-import Router from 'react-router';
+import { Link } from 'react-router';

 import { ColumnModel } from './models/table_models';

-let Link = Router.Link;

 let TableItemWrapper = React.createClass({
    propTypes: {
@ -15,8 +14,6 @@ let TableItemWrapper = React.createClass({
        onClick: React.PropTypes.func
    },

-    mixins: [Router.Navigation],
-
    render() {
        return (
            <tr onClick={this.props.onClick}>
@ -35,7 +32,7 @@ let TableItemWrapper = React.createClass({
                        );
                    } else {

-                        let linkProps = column.transition.toReactRouterLinkProps(this.props.columnContent[column.transition.valueKey]);
+                        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
@ -44,9 +41,9 @@ let TableItemWrapper = React.createClass({
                        return (
                            <td key={i} className={column.className}>
                                <Link
+                                    to={linkString}
                                    className={'ascribe-table-item-column'}
-                                    onClick={column.transition.callback}
-                                    {...linkProps}>
+                                    onClick={column.transition.callback}>
                                    <TypeElement {...typeElementProps} />
                                </Link>
                            </td>
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
@ -40,7 +40,8 @@ let FileDragAndDrop = React.createClass({
            plural: React.PropTypes.string
        }),

-        allowedExtensions: React.PropTypes.string
+        allowedExtensions: React.PropTypes.string,
+        location: React.PropTypes.object
    },

    handleDragOver(event) {
@ -142,7 +143,8 @@ let FileDragAndDrop = React.createClass({
              fileClassToUpload,
              areAssetsDownloadable,
              areAssetsEditable,
-              allowedExtensions
+              allowedExtensions,
+              location
            } = this.props;

        // has files only is true if there are files that do not have the status deleted or canceled
@ -179,7 +181,8 @@ let FileDragAndDrop = React.createClass({
                            hasFiles={hasFiles}
                            onClick={this.handleOnClick}
                            enableLocalHashing={enableLocalHashing}
-                            fileClassToUpload={fileClassToUpload}/>
+                            fileClassToUpload={fileClassToUpload}
+                            location={location}/>
                        <FileDragAndDropPreviewIterator
                            files={filesToUpload}
                            handleDeleteFile={this.handleDeleteFile}
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
@ -1,11 +1,10 @@
 'use strict';

 import React from 'react';
-import Router from 'react-router';
+import { Link } from 'react-router';

 import { getLangText } from '../../../utils/lang_utils';

-let Link = Router.Link;

 let FileDragAndDropDialog = React.createClass({
    propTypes: {
@ -19,7 +18,9 @@ let FileDragAndDropDialog = React.createClass({
        fileClassToUpload: React.PropTypes.shape({
            singular: React.PropTypes.string,
            plural: React.PropTypes.string
-        })
+        }),
+
+        location: React.PropTypes.object
    },

    mixins: [Router.State],
@ -38,11 +39,13 @@ let FileDragAndDropDialog = React.createClass({
                let queryParamsUpload = Object.assign({}, queryParams);
                queryParamsUpload.method = 'upload';

+                let { location } = this.props;
+
                return (
                    <div className="file-drag-and-drop-dialog present-options">
                        <p>{getLangText('Would you rather')}</p>
                        <Link
-                            to={this.getPath()}
+                            to={location.pathname + location.query}
                            query={queryParamsHash}>
                            <span className="btn btn-default btn-sm">
                                {getLangText('Hash your work')}
@ -52,7 +55,7 @@ let FileDragAndDropDialog = React.createClass({
                        <span> or </span>
                       
                       <Link
-                            to={this.getPath()}
+                            to={location.pathname + location.query}
                            query={queryParamsUpload}>
                            <span className="btn btn-default btn-sm">
                                {getLangText('Upload and hash your work')}
--- a/js/components/ascribe_uploader/react_s3_fine_uploader.js
+++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js
@ -127,7 +127,9 @@ let ReactS3FineUploader = React.createClass({
        fileInputElement: React.PropTypes.oneOfType([
            React.PropTypes.func,
            React.PropTypes.element
-        ])
+        ]),
+
+        location: React.PropTypes.object
    },

    mixins: [Router.State],
@ -859,12 +861,20 @@ let ReactS3FineUploader = React.createClass({
             enableLocalHashing,
             fileClassToUpload,
             validation,
-             fileInputElement
+             fileInputElement,
+             location
            } = this.props;

        // Here we initialize the template that has been either provided from the outside
        // or the default input that is FileDragAndDrop.
        return React.createElement(fileInputElement, {
+            multiple,
+            areAssetsDownloadable,
+            areAssetsEditable,
+            onInactive,
+            enableLocalHashing,
+            fileClassToUpload,
+            location,
            onDrop: this.handleUploadFile,
            filesToUpload: this.state.filesToUpload,
            handleDeleteFile: this.handleDeleteFile,
@ -872,14 +882,8 @@ let ReactS3FineUploader = React.createClass({
            handlePauseFile: this.handlePauseFile,
            handleResumeFile: this.handleResumeFile,
            handleCancelHashing: this.handleCancelHashing,
-            multiple: multiple,
-            areAssetsDownloadable: areAssetsDownloadable,
-            areAssetsEditable: areAssetsEditable,
-            onInactive: onInactive,
            dropzoneInactive: this.isDropzoneInactive(),
            hashingProgress: this.state.hashingProgress,
-            enableLocalHashing: enableLocalHashing,
-            fileClassToUpload: fileClassToUpload,
            allowedExtensions: this.getAllowedExtensions()
        });
    }
--- a/js/components/header_notification.js
+++ b/js/components/header_notification.js
@ -1,7 +1,7 @@
 'use strict';

 import React from 'react';
-import Router from 'react-router';
+import { Link } from 'react-router';
 import DropdownButton from 'react-bootstrap/lib/DropdownButton';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import MenuItem from 'react-bootstrap/lib/MenuItem';
@ -14,8 +14,6 @@ import NotificationStore from '../stores/notification_store';
 import { mergeOptions } from '../utils/general_utils';
 import { getLangText } from '../utils/lang_utils';

-let Link = Router.Link;
-

 let HeaderNotifications = React.createClass({

@ -39,7 +37,7 @@ let HeaderNotifications = React.createClass({
        this.setState(state);
    },

-    onMenuItemClick(event) {
+    onMenuItemClick() {
        /*
        This is a hack to make the dropdown close after clicking on an item
        The function just need to be defined
@ -158,23 +156,13 @@ let NotificationListItem = React.createClass({
    },

    getLinkData() {
+        let { pieceOrEdition } = this.props;

        if (this.isPiece()) {
-            return {
-                to: 'piece',
-                params: {
-                    pieceId: this.props.pieceOrEdition.id
-                }
-            };
+            return `/pieces/${pieceOrEdition.id}`;
        } else {
-            return {
-                to: 'edition',
-                params: {
-                    editionId: this.props.pieceOrEdition.bitcoin_id
-                }
-            };
+            return `/pieces/${pieceOrEdition.bitcoin_id}`;
        }
-
    },

    onClick(event){
@ -184,7 +172,7 @@ let NotificationListItem = React.createClass({
    getNotificationText(){
        let numNotifications = null;
        if (this.props.notification.length > 1){
-            numNotifications = <div>+ {this.props.notification.length - 1} more...</div>;
+            numNotifications = <div>+ {this.props.notification.length - 1} {getLangText('more...')}</div>;
        }
        return (
            <div className="notification-action">
@ -196,7 +184,7 @@ let NotificationListItem = React.createClass({
    render() {
        if (this.props.pieceOrEdition) {
            return (
-                <Link {...this.getLinkData()} onClick={this.onClick}>
+                <Link to={this.getLinkData()} onClick={this.onClick}>
                    <div className="row notification-wrapper">
                        <div className="col-xs-4 clear-paddings">
                            <div className="thumbnail-wrapper">
--- a/js/components/login_container.js
+++ b/js/components/login_container.js
@ -1,14 +1,12 @@
 'use strict';

 import React from 'react';
-import Router from 'react-router';
+import { Link } from 'react-router';

 import LoginForm from './ascribe_forms/form_login';

 import { getLangText } from '../utils/lang_utils';

-let Link = Router.Link;
-

 let LoginContainer = React.createClass({
    propTypes: {
@ -35,8 +33,8 @@ let LoginContainer = React.createClass({
                    message={this.props.message}
                    onLogin={this.props.onLogin}/>
                <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>
+                    {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>
                </div>
            </div>
        );
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@ -37,7 +37,8 @@ let RegisterPiece = React.createClass( {
            React.PropTypes.arrayOf(React.PropTypes.element),
            React.PropTypes.element,
            React.PropTypes.string
-        ])
+        ]),
+        location: React.PropTypes.object
    },

    mixins: [Router.Navigation],
@ -149,7 +150,8 @@ let RegisterPiece = React.createClass( {
                                {...this.props}
                                isFineUploaderActive={this.state.isFineUploaderActive}
                                handleSuccess={this.handleSuccess}
-                                onLoggedOut={this.onLoggedOut}>
+                                onLoggedOut={this.onLoggedOut}
+                                location={this.props.location}>
                                {this.props.children}
                                {this.getSpecifyEditions()}
                            </RegisterPieceForm>
--- a/js/components/signup_container.js
+++ b/js/components/signup_container.js
@ -1,13 +1,12 @@
 'use strict';

 import React from 'react';
-import Router from 'react-router';
+import { Link } from 'react-router';

 import SignupForm from './ascribe_forms/form_signup';

 import { getLangText } from '../utils/lang_utils';

-let Link = Router.Link;

 let SignupContainer = React.createClass({
    getInitialState() {
@ -39,7 +38,7 @@ let SignupContainer = React.createClass({
            <div className="ascribe-login-wrapper">
                <SignupForm handleSuccess={this.handleSuccess} />
                <div className="ascribe-login-text">
-                    {getLangText('Already an ascribe user')}&#63; <Link to="login">{getLangText('Log in')}...</Link><br/>
+                    {getLangText('Already an ascribe user')}&#63; <Link to="/login">{getLangText('Log in')}...</Link><br/>
                </div>
            </div>

--- a/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js
+++ b/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js
@ -1,7 +1,7 @@
 'use strict';

 import React from 'react';
-import Router from 'react-router';
+import { Link } from 'react-router';
 import StarRating from 'react-star-rating';

 import PieceListActions from '../../../../../actions/piece_list_actions';
@ -21,12 +21,9 @@ import GlobalNotificationActions from '../../../../../actions/global_notificatio
 import AclProxy from '../../../../acl_proxy';
 import SubmitToPrizeButton from './../ascribe_buttons/submit_to_prize_button';

-
 import { getLangText } from '../../../../../utils/lang_utils';
 import { mergeOptions } from '../../../../../utils/general_utils';

-let Link = Router.Link;
-

 let AccordionListItemPrize = React.createClass({
    propTypes: {
@ -85,7 +82,7 @@ let AccordionListItemPrize = React.createClass({

                return (
                    <div id="list-rating" className="pull-right">
-                        <Link to='piece' params={{pieceId: this.props.content.id}}>
+                        <Link to={`/pieces/${this.props.content.id}`}>
                            <StarRating
                                ref='rating'
                                name="prize-rating"
@ -108,7 +105,7 @@ let AccordionListItemPrize = React.createClass({
                // jury and no rating yet
                return (
                    <div className="react-rating-caption pull-right">
-                        <Link to='piece' params={{pieceId: this.props.content.id}}>
+                        <Link to={`/pieces/${this.props.content.id}`}>
                            {getLangText('Submit your rating')}
                        </Link>
                    </div>
--- a/js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js
+++ b/js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js
@ -1,7 +1,7 @@
 'use strict';

 import React from 'react';
-import Router from 'react-router';
+import { Link } from 'react-router';
 import Moment from 'moment';

 import StarRating from 'react-star-rating';
@ -41,7 +41,6 @@ import ApiUrls from '../../../../../constants/api_urls';
 import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';

-let Link = Router.Link;

 /**
 * This is the component that implements resource/data specific functionality
@ -169,12 +168,12 @@ let NavigationHeader = React.createClass({
            return (
                <div style={{marginBottom: '1em'}}>
                    <div className="row no-margin">
-                        <Link className="disable-select" to='piece' params={{pieceId: nav.prev_index ? nav.prev_index : this.props.piece.id}}>
+                        <Link className="disable-select" to={`/pieces/${ nav.prev_index || this.props.piece.id }`}>
                            <span className="glyphicon glyphicon-chevron-left pull-left link-ascribe" aria-hidden="true">
                            {getLangText('Previous')}
                            </span>
                        </Link>
-                        <Link className="disable-select" to='piece' params={{pieceId: nav.next_index ? nav.next_index : this.props.piece.id}}>
+                        <Link className="disable-select" to={`/pieces/${ nav.next_index || this.props.piece.id }`}>
                            <span className="pull-right link-ascribe">
                                {getLangText('Next')}
                                <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
--- a/js/components/whitelabel/prize/components/prize_login_container.js
+++ b/js/components/whitelabel/prize/components/prize_login_container.js
@ -1,14 +1,12 @@
 'use strict';

 import React from 'react';
-import Router from 'react-router';
+import { Link } from 'react-router';

 import LoginForm from '../../../ascribe_forms/form_login';

 import { getLangText } from '../../../../utils/lang_utils';

-let Link = Router.Link;
-

 let LoginContainer = React.createClass({
    render() {
@ -19,11 +17,11 @@ let LoginContainer = React.createClass({
                <div
                    className="ascribe-login-text">
                    {getLangText('I\'m not a user') + ' '}
-                    <Link to="signup">{getLangText('Sign up...')}</Link>
+                    <Link to="/signup">{getLangText('Sign up...')}</Link>
                    <br/>

                    {getLangText('I forgot my password') + ' '}
-                    <Link to="password_reset">{getLangText('Rescue me...')}</Link>
+                    <Link to="/password_reset">{getLangText('Rescue me...')}</Link>
                </div>
            </div>
        );
--- a/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js
+++ b/js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js
@ -21,6 +21,10 @@ import { getLangText } from '../../../../../../utils/lang_utils';
 import { mergeOptions } from '../../../../../../utils/general_utils';

 let CylandPieceContainer = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },
+
    getInitialState() {
        return mergeOptions(
            PieceStore.getState(),
@ -68,7 +72,8 @@ let CylandPieceContainer = React.createClass({
                        <CylandAdditionalDataForm
                            piece={this.state.piece}
                            disabled={!this.state.piece.acl.acl_edit}
-                            isInline={true} />
+                            isInline={true}
+                            location={this.props.location}/>
                    </CollapsibleParagraph>
                </WalletPieceContainer>
            );
--- a/js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js
+++ b/js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js
@ -26,7 +26,8 @@ let CylandAdditionalDataForm = React.createClass({
        handleSuccess: React.PropTypes.func,
        piece: React.PropTypes.object.isRequired,
        disabled: React.PropTypes.bool,
-        isInline: React.PropTypes.bool
+        isInline: React.PropTypes.bool,
+        location: React.PropTypes.object
    },

    getDefaultProps() {
@ -140,7 +141,8 @@ let CylandAdditionalDataForm = React.createClass({
                        isReadyForFormSubmission={formSubmissionValidation.fileOptional}
                        pieceId={piece.id}
                        otherData={piece.other_data}
-                        multiple={true}/>
+                        multiple={true}
+                        location={this.props.location}/>
                </Form>
            );
        } else {
--- a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
@ -39,6 +39,9 @@ import { getAclFormMessage } from '../../../../../utils/form_utils';


 let CylandRegisterPiece = React.createClass({
+    propTypes: {
+        location: React.PropTypes.object
+    },

    mixins: [Router.Navigation, Router.State],

@ -190,7 +193,8 @@ let CylandRegisterPiece = React.createClass({
                                submitMessage={getLangText('Submit')}
                                isFineUploaderActive={this.state.isFineUploaderActive}
                                handleSuccess={this.handleRegisterSuccess}
-                                onLoggedOut={this.onLoggedOut} />
+                                onLoggedOut={this.onLoggedOut}
+                                location={this.props.location}/>
                        </Col>
                    </Row>
                </div>
@ -200,7 +204,8 @@ let CylandRegisterPiece = React.createClass({
                            <CylandAdditionalDataForm
                                disabled={this.state.step > 1}
                                handleSuccess={this.handleAdditionalDataSuccess}
-                                piece={this.state.piece}/>
+                                piece={this.state.piece}
+                                location={this.props.location}/>
                        </Col>
                    </Row>
                </div>
--- a/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
+++ b/js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
@ -33,10 +33,10 @@ import { mergeOptions } from '../../../../../utils/general_utils';
 import { getLangText } from '../../../../../utils/lang_utils';

 let IkonotvRegisterPiece = React.createClass({
-
    propTypes: {
        handleSuccess: React.PropTypes.func,
-        piece: React.PropTypes.object.isRequired
+        piece: React.PropTypes.object.isRequired,
+        location: React.PropTypes.object
    },

    mixins: [Router.Navigation, Router.State],
@ -256,7 +256,8 @@ let IkonotvRegisterPiece = React.createClass({
                                submitMessage={getLangText('Register')}
                                isFineUploaderActive={this.state.isFineUploaderActive}
                                handleSuccess={this.handleRegisterSuccess}
-                                onLoggedOut={this.onLoggedOut} />
+                                onLoggedOut={this.onLoggedOut}
+                                location={this.props.location}/>
                        </Col>
                    </Row>
                </div>
--- a/js/routes.js
+++ b/js/routes.js
@ -44,7 +44,7 @@ const COMMON_ROUTES = (
        <Route path="password_reset" component={PasswordResetContainer} />
        <Route path="settings" component={SettingsContainer} />
        <Route path="contract_settings" component={ContractSettings} />
-        <Route path="verify" component={CoaVerifyContainer} />
+        <Route path="coa_verify" component={CoaVerifyContainer} />
        <Route path="*" component={ErrorNotFoundPage} />
    </Route>
 );