Router/Route usage consistency between dapps

js/src/views/Accounts/index.js

@@ -16,7 +16,7 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
-import { hashHistory } from 'react-router';
+import { Route, Router, hashHistory } from 'react-router';
 
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -39,7 +39,9 @@ const store = initStore(api, hashHistory);
 
 ReactDOM.render(
   <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-    <Accounts />
+    <Router history={ hashHistory }>
+      <Route path='/' component={ Accounts } />
+    </Router>
   </ContextProvider>,
   document.querySelector('#container')
 );

js/src/views/Addresses/index.js

@@ -16,7 +16,7 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
-import { hashHistory } from 'react-router';
+import { Route, Router, hashHistory } from 'react-router';
 
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -41,7 +41,9 @@ const store = initStore(api, hashHistory);
 
 ReactDOM.render(
   <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-    <Addresses />
+    <Router history={ hashHistory }>
+      <Route path='/' component={ Addresses } />
+    </Router>
   </ContextProvider>,
   document.querySelector('#container')
 );

js/src/views/ContractDevelop/index.js

@@ -16,7 +16,7 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
-import { hashHistory } from 'react-router';
+import { Route, Router, hashHistory } from 'react-router';
 
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -38,7 +38,9 @@ const store = initStore(api, hashHistory);
 
 ReactDOM.render(
   <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-    <ContractDevelop />
+    <Router history={ hashHistory }>
+      <Route path='/' component={ ContractDevelop } />
+    </Router>
   </ContextProvider>,
   document.querySelector('#container')
 );

js/src/views/Contracts/index.js

@@ -16,7 +16,7 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
-import { hashHistory } from 'react-router';
+import { Route, Router, hashHistory } from 'react-router';
 
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -39,7 +39,9 @@ const store = initStore(api, hashHistory);
 
 ReactDOM.render(
   <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-    <Contracts />
+    <Router history={ hashHistory }>
+      <Route path='/' component={ Contracts } />
+    </Router>
   </ContextProvider>,
   document.querySelector('#container')
 );

js/src/views/Home/index.js

@@ -16,7 +16,7 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
-import { hashHistory } from 'react-router';
+import { Route, Router, hashHistory } from 'react-router';
 
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -38,7 +38,9 @@ const store = initStore(api, hashHistory);
 
 ReactDOM.render(
   <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-    <Home />
+    <Router history={ hashHistory }>
+      <Route path='/' component={ Home } />
+    </Router>
   </ContextProvider>,
   document.querySelector('#container')
 );

js/src/views/Settings/index.js

@@ -21,26 +21,36 @@ import { IndexRedirect, Route, Router, hashHistory } from 'react-router';
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
 
+import { initStore } from '~/redux';
+import ContextProvider from '~/ui/ContextProvider';
+import muiTheme from '~/ui/Theme';
+
+import { api } from './parity';
+
 import SettingsBackground from './Background';
 import SettingsParity from './Node';
 import SettingsProxy from './Proxy';
 import SettingsViews from './Views';
-import Main from './main';
+import Settings from './settings';
 
 import '~/../assets/fonts/Roboto/font.css';
 import '~/../assets/fonts/RobotoMono/font.css';
 
 import './settings.css';
 
+const store = initStore(api, hashHistory);
+
 ReactDOM.render(
-  <Router history={ hashHistory }>
+  <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-    <Route path='/' component={ Main }>
+    <Router history={ hashHistory }>
-      <Route path='/background' component={ SettingsBackground } />
+      <Route path='/' component={ Settings }>
-      <Route path='/parity' component={ SettingsParity } />
+        <Route path='/background' component={ SettingsBackground } />
-      <Route path='/proxy' component={ SettingsProxy } />
+        <Route path='/parity' component={ SettingsParity } />
-      <Route path='/views' component={ SettingsViews } />
+        <Route path='/proxy' component={ SettingsProxy } />
-      <IndexRedirect to='/views' />
+        <Route path='/views' component={ SettingsViews } />
-    </Route>
+        <IndexRedirect to='/views' />
-  </Router>,
+      </Route>
+    </Router>
+  </ContextProvider>,
   document.querySelector('#container')
 );

js/src/views/Settings/main.js

@@ -1,42 +0,0 @@
-// Copyright 2015-2017 Parity Technologies (UK) Ltd.
-// This file is part of Parity.
-
-// Parity is free software: you can redistribute it and/or modify
-// it under the terms of the GNU General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-
-// Parity is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU General Public License for more details.
-
-// You should have received a copy of the GNU General Public License
-// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
-
-import React, { PropTypes } from 'react';
-import { hashHistory } from 'react-router';
-
-import { api } from './parity';
-
-import { initStore } from '~/redux';
-import ContextProvider from '~/ui/ContextProvider';
-import muiTheme from '~/ui/Theme';
-
-import Settings from './settings';
-
-const store = initStore(api, hashHistory);
-
-export default function Main ({ children }) {
-  return (
-    <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-      <Settings>
-        { children }
-      </Settings>
-    </ContextProvider>
-  );
-}
-
-Main.propTypes = {
-  children: PropTypes.node
-};

js/src/views/Signer/index.js

@@ -16,7 +16,7 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
-import { hashHistory } from 'react-router';
+import { Route, Router, hashHistory } from 'react-router';
 
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -39,7 +39,9 @@ const store = initStore(api, hashHistory);
 
 ReactDOM.render(
   <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-    <Signer />
+    <Router history={ hashHistory }>
+      <Route path='/' component={ Signer } />
+    </Router>
   </ContextProvider>,
   document.querySelector('#container')
 );

js/src/views/Status/index.js

@@ -16,7 +16,7 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
-import { hashHistory } from 'react-router';
+import { Route, Router, hashHistory } from 'react-router';
 
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -41,7 +41,9 @@ const store = initStore(api, hashHistory);
 
 ReactDOM.render(
   <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-    <Status />
+    <Router history={ hashHistory }>
+      <Route path='/' component={ Status } />
+    </Router>
   </ContextProvider>,
   document.querySelector('#container')
 );

js/src/views/Vaults/index.js

@@ -16,7 +16,7 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
-import { hashHistory } from 'react-router';
+import { Route, Router, hashHistory } from 'react-router';
 
 import injectTapEventPlugin from 'react-tap-event-plugin';
 injectTapEventPlugin();
@@ -41,7 +41,9 @@ const store = initStore(api, hashHistory);
 
 ReactDOM.render(
   <ContextProvider api={ api } muiTheme={ muiTheme } store={ store }>
-    <Vaults />
+    <Router history={ hashHistory }>
+      <Route path='/' component={ Vaults } />
+    </Router>
   </ContextProvider>,
   document.querySelector('#container')
 );