Add routing to mp mfe (SAP#2625)

y-kkamil · Mar 28, 2022 · c7590bc · c7590bc
1 parent 319a7c1
commit c7590bc
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/docs/navigation-advanced.md b/docs/navigation-advanced.md
@@ -80,7 +80,7 @@ Luigi.setConfig({
                                     hideAutomatically: true,
                                     enabled: true
                                 },
-                                viewUrl: '/#route1/examples/microfrontends/multipurpose.html#/route2',
+                                viewUrl: '/examples/microfrontends/multipurpose.html#/route2',
                             },
                         ]
                     }

diff --git a/website/fiddle/public/examples/microfrontends/multipurpose.html b/website/fiddle/public/examples/microfrontends/multipurpose.html
@@ -37,11 +37,34 @@
   </head>
 
   <body style="-webkit-font-smoothing: antialiased; color: #515559;">
+    <div id="routeCnt"></div>
     <div id="imgCnt"></div>
     <div id="textCnt">
       <h1 id="title">Multi purpose demo page</h1>
       <p id="content">Some content</p>
     </div>
+
+    <script>
+      function navigate(route) {
+        if (route === '#/preload') {
+          document.body.style.display = 'none';
+        } else {
+          document.body.style.display = 'block';
+          document.getElementById('title').innerHTML = route
+            ? `<h2>${route.replace('#/', '')}</h2>`
+            : '';
+        }
+      }
+
+      const navChangeLst = () => {
+        navigate(window.location.hash);
+      };
+      window.addEventListener('hashchange', navChangeLst);
+      window.addEventListener('popstate', navChangeLst);
+
+      navigate(window.location.hash);
+    </script>
+
     <script>
       function updateFn(context) {
         if (context.title) {