Better use of React-Router (maintaining old routes)

js/src/main.js

@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import { Redirect, Router, Route } from 'react-router';
+import { Redirect, Router, Route, IndexRoute } from 'react-router';
 
 import { Accounts, Account, Addresses, Address, Application, Contract, Contracts, WriteContract, Wallet, Dapp, Dapps, Settings, SettingsBackground, SettingsParity, SettingsProxy, SettingsViews, Signer, Status } from '~/views';
 
@@ -26,6 +26,23 @@ export default class MainApplication extends Component {
     routerHistory: PropTypes.any.isRequired
   };
 
+  handleDeprecatedRoute = (nextState, replace) => {
+    const { address } = nextState.params;
+    const redirectMap = {
+      account: 'accounts',
+      address: 'addresses',
+      contract: 'contracts'
+    };
+
+    const oldRoute = nextState.routes[0].path;
+    const newRoute = Object.keys(redirectMap).reduce((newRoute, key) => {
+      return newRoute.replace(new RegExp(`^/${key}`), '/' + redirectMap[key]);
+    }, oldRoute);
+
+    console.warn(`Route "${oldRoute}" is deprecated. Please use "${newRoute}"`);
+    replace(newRoute.replace(':address', address));
+  }
+
   render () {
     const { routerHistory } = this.props;
 
@@ -34,26 +51,46 @@ export default class MainApplication extends Component {
         <Redirect from='/' to='/accounts' />
         <Redirect from='/auth' to='/accounts' query={ {} } />
         <Redirect from='/settings' to='/settings/views' />
+
+        { /** Backward Compatible links */ }
+        <Route path='/account/:address' onEnter={ this.handleDeprecatedRoute } />
+        <Route path='/address/:address' onEnter={ this.handleDeprecatedRoute } />
+        <Route path='/contract/:address' onEnter={ this.handleDeprecatedRoute } />
+
         <Route path='/' component={ Application }>
-          <Route path='accounts' component={ Accounts } />
-          <Route path='account/:address' component={ Account } />
-          <Route path='wallet/:address' component={ Wallet } />
-          <Route path='addresses' component={ Addresses } />
-          <Route path='address/:address' component={ Address } />
+          <Route path='accounts'>
+            <IndexRoute component={ Accounts } />
+            <Route path=':address' component={ Account } />
+            <Route path='/wallet/:address' component={ Wallet } />
+          </Route>
+
+          <Route path='addresses'>
+            <IndexRoute component={ Addresses } />
+            <Route path=':address' component={ Address } />
+          </Route>
+
           <Route path='apps' component={ Dapps } />
           <Route path='app/:id' component={ Dapp } />
-          <Route path='contracts' component={ Contracts } />
-          <Route path='contracts/write' component={ WriteContract } />
-          <Route path='contract/:address' component={ Contract } />
+
+          <Route path='contracts'>
+            <IndexRoute component={ Contracts } />
+            <Route path='write' component={ WriteContract } />
+            <Route path=':address' component={ Contract } />
+          </Route>
+
           <Route path='settings' component={ Settings }>
             <Route path='background' component={ SettingsBackground } />
             <Route path='proxy' component={ SettingsProxy } />
             <Route path='views' component={ SettingsViews } />
             <Route path='parity' component={ SettingsParity } />
           </Route>
+
           <Route path='signer' component={ Signer } />
-          <Route path='status' component={ Status } />
-          <Route path='status/:subpage' component={ Status } />
+
+          <Route path='status'>
+            <IndexRoute component={ Status } />
+            <Route path=':subpage' component={ Status } />
+          </Route>
         </Route>
       </Router>
     );

js/src/views/Accounts/Summary/summary.js

@@ -153,7 +153,7 @@ export default class Summary extends Component {
     const { link, noLink, account, name } = this.props;
 
     const { address } = account;
-    const viewLink = `/${link || 'account'}/${address}`;
+    const viewLink = `/${link || 'accounts'}/${address}`;
 
     const content = (
       <IdentityName address={ address } name={ name } unknown />

js/src/views/Addresses/addresses.js

@@ -95,7 +95,7 @@ class Addresses extends Component {
 
     return (
       <List
-        link='address'
+        link='addresses'
         search={ searchValues }
         accounts={ contacts }
         balances={ balances }

js/src/views/Contracts/contracts.js

@@ -85,7 +85,7 @@ class Contracts extends Component {
         { this.renderDeployContract() }
         <Page>
           <List
-            link='contract'
+            link='contracts'
             search={ searchValues }
             accounts={ contracts }
             balances={ balances }