Restructured and beginning to work with loadable pages.

public/components/App.jsx

@@ -28,7 +28,7 @@ import { HashRouter, BrowserRouter } from 'react-router-dom';
 import Background from '@objects/background/Background';
 import Header from './header/Header';
 import Footer from './footer/Footer';
-import Routes from './page/Routes';
+import Routes, { RouteWrapper } from './page/Routes';
 import Favicon from './Favicon';
 
 class App extends React.Component {
@@ -47,27 +47,44 @@ class App extends React.Component {
   }
 
   render() {
+    let { className, menuOpen, modal } = this.props;
+
+    //Generate base clazzes
     let clazz = "c-app";
-    if(this.props.menuOpen) clazz += " is-menu-open ";
 
-    let modal;
-    if(this.props.modal.open) clazz += " is-modal-open";
-    if(this.props.modal.modal) modal = this.props.modal.modal;
+    //Menu Open?
+    if(menuOpen) clazz += " is-menu-open ";
 
-    let children = (
-      <div className={clazz} ref="app">
-        <Favicon />
-        <Header />
-        { modal }
-        <Routes onEntering={this.onEnteringBound} />
-      </div>
+    //Fetch the modal from the store
+    let modalObject;
+    if(modal.open) clazz += " is-modal-open";
+    if(modal.modal) modalObject = modal.modal;
+
+    //Append any other clazzes there may be.
+    if(className) clazz += " " + className;
+
+    //For testing you can switch the router type
+    let RouterType = BrowserRouter;
+    if(true) RouterType = HashRouter;
+
+    return (
+      <RouterType>
+        <div className={clazz} ref="app">
+          <Favicon />
+          <Header />
+
+          { modalObject }
+
+          {/* Routes */}
+          <Routes onEntering={ this.onEnteringBound }>
+            <RouteWrapper exact path="/" page={ () => import('@pages/home/HomePage') } />
+            <RouteWrapper exact path="/contact" page={ () => import('@pages/contact/ContactPage') } />
+
+            <RouteWrapper exact path="/legal/privacy" page={ () => import('@pages/legal/privacy/PrivacyPolicyPage') } />
+          </Routes>
+        </div>
+      </RouterType>
     );
-
-    if(false) {
-      return <HashRouter>{children}</HashRouter>;
-    } else {
-      return <BrowserRouter>{children}</BrowserRouter>;
-    }
   }
 }