Added nav

packages/container/config/webpack.dev.js

@@ -8,7 +8,7 @@ const devConfig = {
     devServer: {
         port: 8080,
         historyApiFallback: {
-            index: 'index.html'
+            index: '/index.html'
         }
     },
     plugins: [

packages/container/src/App.js

@@ -9,7 +9,8 @@ const generateClassName = createGenerateClassName({
 });
 
 export default () => {
-    return (    
+    return (
+    // Creates copy of browser history for us    
     <BrowserRouter>
         <StylesProvider generateClassName={generateClassName}>
             <div>

packages/container/src/components/MarketingApp.js

@@ -1,12 +1,25 @@
 import { mount } from 'marketing/MarketingApp';
 import React, { useRef, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 
 export default () => {
     const ref = useRef(null);
+    const history = useHistory();
 
     useEffect(() => {
-        mount(ref.current);
-    });
+        const { onParentNavigate } = mount(ref.current,{
+            onNavigate: ({ pathname: nextPathname }) => {
+                const { pathname } = history.location;
+
+                if (pathname !== nextPathname) {
+                    history.push(nextPathname);
+                };
+            }
+        });
+
+        //  Any time there's a change in browser history, we call on this
+        history.listen(onParentNavigate);
+    }, []);
 
     return <div ref={ref} />
 };

packages/marketing/config/webpack.dev.js

@@ -9,7 +9,7 @@ const devConfig = {
     devServer: {
         port: 8081,
         historyApiFallback: {
-            index: 'index.html'
+            index: '/index.html'
         }
     },
     plugins: [

packages/marketing/src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Switch, Route, BrowserRouter } from 'react-router-dom';
+import { Switch, Route, Router } from 'react-router-dom';
 import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles';
 
 import Landing from './components/Landing';
@@ -11,15 +11,18 @@ const generateClassName = createGenerateClassName({
     productionPrefix: 'ma',
 });
 
-export default () => {
-    return <div>
+export default ({ history }) => {
+    return (    
+    <div>
         <StylesProvider generateClassName={generateClassName}>
-            <BrowserRouter>
+        {/* Creating a memory history */}
+            <Router history={history}>
                 <Switch>
                     <Route exact path="/pricing" component={Pricing} />
                     <Route path ="/" component={Landing} />
                 </Switch>
-            </BrowserRouter>
+            </Router>
         </StylesProvider>
     </div>
+    )
 };

packages/marketing/src/bootstrap.js

@@ -1,21 +1,35 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { createMemoryHistory, createBrowserHistory } from 'history';
 import App from './App';
 
-// const root = ReactDOM.createRoot(document.getElementById("root"));
-
 // Mount function to start up app
-const mount = (el) => {
+const mount = (el, { onNavigate, defaultHistory }) => {
+    const history = defaultHistory || createMemoryHistory();
+    if (onNavigate) {
+        history.listen(onNavigate);
+    };
+
     ReactDOM.render(
-        <App />,
+        <App history={history}/>,
         el
-    )
-}
+    );
+
+    return {
+        onParentNavigate({ pathname: nextPathname }) {
+            const { pathname } = history.location;
+            if (pathname !== nextPathname) {
+                history.push(nextPathname);
+            }
+        }
+    };
+};
 
+// If in dev mode and isolated, then call mount immediately
 if (process.env.NODE_ENV === 'development') {
     const devRoot = document.querySelector('#_marketing-dev-root');
     if (devRoot) {
-        mount(devRoot)
+        mount(devRoot, { defaultHistory: createBrowserHistory() });
     }
 };