package.json

@@ -47,6 +47,7 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",
+    "react-router-dom": "^4.2.2",
     "redux": "^3.7.2",
     "request": "^2.83.0",
     "request-promise": "^4.2.2",

react/app.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import {Provider} from 'react-redux';
-import {createStore} from 'redux';
-import Reducer from 'reducers';
-import Publish from 'containers/PublishTool';
-import NavBar from 'containers/NavBar';
-
-let store = createStore(
-  Reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
-ReactDOM.render(
-  <Provider store={store}>
-    <NavBar />
-  </Provider>,
-  document.getElementById('react-nav-bar')
-)
-
-ReactDOM.render(
-  <Provider store={store}>
-    <Publish />
-  </Provider>,
-  document.getElementById('react-publish-tool')
-)

react/components/AboutPage/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import NavBar from 'containers/NavBar';
+
+class AboutPage extends React.Component {
+  render () {
+    return (
+      <div>
+        <NavBar/>
+        <h1>About page</h1>;
+      </div>
+    );
+  }
+};
+
+export default AboutPage;

react/components/LoginPage/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import NavBar from 'containers/NavBar';
+
+class PublishPage extends React.Component {
+  render () {
+    return (
+      <div>
+        <NavBar/>
+        <h1>Login Page</h1>
+      </div>
+    );
+  }
+};
+
+export default PublishPage;

react/components/PublishPage/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import NavBar from 'containers/NavBar';
+import PublishTool from 'containers/PublishTool';
+
+class PublishPage extends React.Component {
+  render () {
+    return (
+      <div className={'row row--tall flex-container--column'}>
+        <NavBar/>
+        <div className={'row row--tall row--padded flex-container--column'}>
+          <PublishTool/>
+        </div>
+      </div>
+    );
+  }
+};
+
+export default PublishPage;

react/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { createStore } from 'redux';
+import Reducer from 'reducers';
+import Root from './root';
+
+let store = createStore(
+  Reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+render(
+  <Root store={store} />,
+  document.getElementById('react-app')
+)

react/root.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Provider } from 'react-redux';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+
+import PublishPage from 'components/PublishPage';
+import AboutPage from 'components/AboutPage';
+import LoginPage from 'components/LoginPage';
+
+const Root = ({ store }) => (
+  <Provider store={store}>
+    <Router>
+      <Route exact path="/" component={PublishPage} />
+    </Router>
+  </Provider>
+)
+
+Root.propTypes = {
+  store: PropTypes.object.isRequired,
+}
+
+export default Root;

views/index.handlebars

@@ -1,6 +1,5 @@
-<div id="react-nav-bar"></div>
 <div class="row row--tall flex-container--column">
-    <div id="react-publish-tool" class="row row--padded row--tall flex-container--column">
+    <div id="react-app" class="row row--tall flex-container--column">
         <div class="row row--padded row--tall flex-container--column flex-container--center-center">
             <p>loading...</p>
             {{> progressBar}}

webpack.config.js

@@ -3,7 +3,7 @@ const Path = require('path');
 const REACT_ROOT = Path.resolve(__dirname, 'react/');
 
 module.exports = {
-  entry : ['whatwg-fetch', './react/app.js'],
+  entry : ['whatwg-fetch', './react/index.js'],
   output: {
     path    : Path.join(__dirname, '/public/bundle/'),
     filename: 'bundle.js',