Changes for passing data across to microfrontends

Author: GodaProjects

src/App.js

@@ -13,16 +13,16 @@ const {
 } = process.env;
 
 
-const Microfrontend1 = ({ history }) => (
-  <Microfrontend history={history} host={microfrontend1Host} name="Microfrontend1" />
+const Microfrontend1 = ({ history, data }) => (
+  <Microfrontend history={history} host={microfrontend1Host} name="Microfrontend1" data={data}/>
 );
 
-const Microfrontend2 = ({ history }) => (
-  <Microfrontend history={history} host={microfrontend2Host} name="Microfrontend2" />
+const Microfrontend2 = ({ history, data }) => (
+  <Microfrontend history={history} host={microfrontend2Host} name="Microfrontend2" data={data}/>
 );
 
-const MicrofrontendVueMF = ({ history }) => (
-  <MicrofrontendVue history={history} host={microfrontendVueHost} name="MicrofrontendVue" />
+const MicrofrontendVueMF = ({ history, data }) => (
+  <MicrofrontendVue history={history} host={microfrontendVueHost} name="MicrofrontendVue" data={data}/>
 );
 
 function App() {
@@ -31,9 +31,9 @@ function App() {
       <React.Fragment>
         <Header/>
         <h1>Goda's microfrontend page</h1>
-        <Route exact path="/microfrontend1" component={Microfrontend1} />
-        <Route exact path="/microfrontend2" component={Microfrontend2} />
-        <Route exact path="/microfrontendVue" component={MicrofrontendVueMF} />
+        <Route exact path="/microfrontend1" component={() => <Microfrontend1 data='microfrontend 1 data'/>}/>
+        <Route exact path="/microfrontend2" component={() => <Microfrontend2 data='microfrontend 2 data'/>} />
+        <Route exact path="/microfrontendVue" component={() => <MicrofrontendVueMF data='microfrontend vue data'/>} />
         <Footer/>
 
       </React.Fragment>

src/Microfrontend.js

@@ -28,8 +28,8 @@ class Microfrontend extends React.Component {
     }
 
     renderMicrofrontend = () => {
-        const { name, window, history } = this.props;
-        window[`render${name}`](`${name}-container`, history);
+        const { name, window, history, data } = this.props;
+        window[`render${name}`](`${name}-container`, history, data);
     }
 
     render() {

src/MicrofrontendVue.js

@@ -17,15 +17,13 @@ class MicrofrontendVue extends React.Component {
             script.crossOrigin = '';
             script.src = `${host}/${manifest['app.js']}`;
             document.head.appendChild(script);
-            console.log(script)
 
             script = document.createElement('script');
             script.id = scriptId;
             script.crossOrigin = '';
             script.src = `${host}/${manifest['chunk-vendors.js']}`;
             script.onload = this.renderMicrofrontend;
             document.head.appendChild(script);
-            console.log(script)
         });
 
     }
@@ -37,8 +35,8 @@ class MicrofrontendVue extends React.Component {
 
     renderMicrofrontend = () => {
 
-        const { name, window, history } = this.props;
-        window[`render${name}`](`${name}-container`);
+        const { name, window, history, data } = this.props;
+        window[`render${name}`](`${name}-container`, data);
     }
 
     render() {