From c7590bcfc583e96629b5ff81d95eede9427c9f2f Mon Sep 17 00:00:00 2001
From: Philipp Pracht <philipp.pracht@sap.com>
Date: Mon, 28 Mar 2022 11:45:45 +0200
Subject: [PATCH] Add routing to mp mfe (#2625)

---
 docs/navigation-advanced.md                   |  2 +-
 .../examples/microfrontends/multipurpose.html | 23 +++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)
diff --git a/docs/navigation-advanced.md b/docs/navigation-advanced.md
index 7ee294bcea..448b2222f5 100644
--- 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
index 09738e6a9e..85525efa3a 100644
--- 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) {
